diff --git a/packages/components/src/components/teaser/teaser.test.ts b/packages/components/src/components/teaser/teaser.test.ts index 0ccfccf91..896713563 100644 --- a/packages/components/src/components/teaser/teaser.test.ts +++ b/packages/components/src/components/teaser/teaser.test.ts @@ -172,4 +172,15 @@ describe('', () => { }); }); }); + it('keeps inset property as false after changing variant', async () => { + const el = await fixture(html``); + + 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 + }); }); diff --git a/packages/components/src/components/teaser/teaser.ts b/packages/components/src/components/teaser/teaser.ts index ea1eb75fa..bdaf17d0a 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" >
@@ -117,13 +115,13 @@ export default class SdTeaser extends SolidElement {