aeico-components 0.1.6 → 0.1.7

package/src/tabs/tabs.ts

@@ -4,13 +4,16 @@ import tabsStyle from '../styles/components/tabs.css?inline';
 import AeicoComponent from '../aeico-component';
 import { html } from 'aeico';
 import type Tab from './tab';
+import type { TabVariant } from './defines';
 
 class Tabs extends AeicoComponent {
   static props: Props = {
     activeIndex: { type: Number },
+    variant: { type: String },
   };
 
   declare activeIndex?: number;
+  declare variant?: TabVariant;
 
   protected static styles = [styleVariables, tabsStyle];
 
@@ -77,9 +80,18 @@ class Tabs extends AeicoComponent {
   }
 
   protected onUpdated() {
+    this._syncVariant();
     this._syncActive();
   }
 
+  private _syncVariant() {
+    const variant = this.variant ?? 'text';
+    this.setAttribute('variant', variant);
+    for (const tab of this._tabs) {
+      tab.setAttribute('variant', variant);
+    }
+  }
+
   private _handleTabClick = (e: Event) => {
     const pairs = this._getPairs();
     const target = e.target as Element;