fix: 🐛 prevent rewrite of inset property when border variant was sele…

…cted in sd-teaser (#422)

## Description:
Fixed a bug in sd-teaser to prevent rewrite of inset property when
changing variants and added a corresponding test for it. Closes #362

## Definition of Reviewable:
*PR notes: Irrelevant elements should be removed.*
- [x] relevant tickets are linked
- [x] PR is assigned to project board

packages/components/src/components/teaser/teaser.test.ts

@@ -172,4 +172,15 @@ 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');
+
+    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
+  });
 });

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"
         >