From 89f67f5ba9d54f7aaaed2a932e65ae94cf168ed3 Mon Sep 17 00:00:00 2001
From: azraefendic <azra_efendic@live.com>
Date: Thu, 21 Sep 2023 10:29:19 +0200
Subject: [PATCH 1/3] fix: prevent rewrite of inset property

---
 packages/components/src/components/teaser/teaser.ts | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/components/src/components/teaser/teaser.ts b/packages/components/src/components/teaser/teaser.ts
index ea1eb75faf..bdaf17d0ab 100644
--- a/packages/components/src/components/teaser/teaser.ts
+++ b/packages/components/src/components/teaser/teaser.ts
@@ -78,9 +78,7 @@ export default class SdTeaser extends SolidElement {
   }
 
   render() {
-    if (this.variant === 'white border-neutral-300') {
-      this.inset = true;
-    }
+    const inset = this.variant === 'white border-neutral-300' || this.inset;
 
     const slots = {
       'teaser-has-default': this.hasSlotController.test('[default]'),
@@ -102,13 +100,13 @@ export default class SdTeaser extends SolidElement {
           }[this.variant],
           this._orientation === 'vertical' && 'flex-col',
           this._orientation === 'horizontal' && 'flex-row gap-8',
-          this._orientation === 'horizontal' && this.inset && 'py-8 px-10'
+          this._orientation === 'horizontal' && inset && 'py-8 px-10'
         )}
         part="base"
       >
         <div
           style=${this._orientation === 'horizontal' ? `width: var(--distribution-media, 100%);` : ''}
-          class=${cx(!this.inset && this._orientation === 'vertical' && 'mb-4', !slots['teaser-has-media'] && 'hidden')}
+          class=${cx(!inset && this._orientation === 'vertical' && 'mb-4', !slots['teaser-has-media'] && 'hidden')}
           part="media"
         >
           <slot name="media"></slot>
@@ -117,13 +115,13 @@ export default class SdTeaser extends SolidElement {
         <div
           style=${this._orientation === 'horizontal'
             ? `width: var(--distribution-content, 100%); ${
-                this.inset ? 'width: var(--distribution-content, calc(100% - 2rem));' : ''
+                inset ? 'width: var(--distribution-content, calc(100% - 2rem));' : ''
               }`
             : ''}
           class=${cx(
             'flex flex-col text-left',
             this._orientation === 'horizontal' && `flex flex-col`,
-            this._orientation === 'vertical' && this.inset && 'm-4'
+            this._orientation === 'vertical' && inset && 'm-4'
           )}
           part="content"
         >

From 356c60cffdd073ff993499767472417f5d9827cf Mon Sep 17 00:00:00 2001
From: azraefendic <azra_efendic@live.com>
Date: Thu, 21 Sep 2023 10:38:14 +0200
Subject: [PATCH 2/3] chore: add a new test for inset

---
 .../components/src/components/teaser/teaser.test.ts  | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/packages/components/src/components/teaser/teaser.test.ts b/packages/components/src/components/teaser/teaser.test.ts
index 0ccfccf918..1a75515b27 100644
--- a/packages/components/src/components/teaser/teaser.test.ts
+++ b/packages/components/src/components/teaser/teaser.test.ts
@@ -172,4 +172,16 @@ describe('<sd-teaser>', () => {
       });
     });
   });
+  it('keeps inset property as false after changing variant', async () => {
+    const el = await fixture<SdTeaser>(html`<sd-teaser variant="white border-neutral-300"></sd-teaser>`);
+
+    expect(el.variant).to.equal('white border-neutral-300');
+    expect(el.inset).to.equal(true); // The inset should be true initially due to the variant
+
+    el.variant = 'neutral-100';
+    await el.updateComplete;
+
+    expect(el.variant).to.equal('neutral-100');
+    expect(el.inset).to.equal(false); // The inset should be false after the variant change
+  });
 });

From ebb2bc1a840be2192f351ef4df2b75cbdf08e6c6 Mon Sep 17 00:00:00 2001
From: azraefendic <azra_efendic@live.com>
Date: Thu, 21 Sep 2023 11:27:58 +0200
Subject: [PATCH 3/3] fix: remove extra line

---
 packages/components/src/components/teaser/teaser.test.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/src/components/teaser/teaser.test.ts b/packages/components/src/components/teaser/teaser.test.ts
index 1a75515b27..896713563b 100644
--- a/packages/components/src/components/teaser/teaser.test.ts
+++ b/packages/components/src/components/teaser/teaser.test.ts
@@ -176,7 +176,6 @@ describe('<sd-teaser>', () => {
     const el = await fixture<SdTeaser>(html`<sd-teaser variant="white border-neutral-300"></sd-teaser>`);
 
     expect(el.variant).to.equal('white border-neutral-300');
-    expect(el.inset).to.equal(true); // The inset should be true initially due to the variant
 
     el.variant = 'neutral-100';
     await el.updateComplete;