From ecf5ab5aad428fc01a1d7d1efba33d04bcd02afd Mon Sep 17 00:00:00 2001
From: Cory LaViska <cory@abeautifulsite.net>
Date: Tue, 19 Jul 2022 09:06:12 -0400
Subject: [PATCH] use classMap instead of inline style

---
 src/components/tab-panel/tab-panel.ts | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/tab-panel/tab-panel.ts b/src/components/tab-panel/tab-panel.ts
index 747c69ed..1740a64e 100644
--- a/src/components/tab-panel/tab-panel.ts
+++ b/src/components/tab-panel/tab-panel.ts
@@ -1,5 +1,6 @@
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import { autoIncrement } from '../../internal/auto-increment';
 import styles from './tab-panel.styles';
 import type { CSSResultGroup } from 'lit';
@@ -33,10 +34,16 @@ export default class SlTabPanel extends LitElement {
   }
 
   render() {
-    this.style.display = this.active ? 'block' : 'none';
-
     return html`
-      <div part="base" class="tab-panel" role="tabpanel" aria-hidden=${this.active ? 'false' : 'true'}>
+      <div
+        part="base"
+        class=${classMap({
+          'tab-panel': true,
+          'tab-panel--active': this.active
+        })}
+        role="tabpanel"
+        aria-hidden=${this.active ? 'false' : 'true'}
+      >
         <slot></slot>
       </div>
     `;