fix: wrong font family for tab buttons #140

playground/tab/index.html

@@ -15,7 +15,11 @@
     <h1>Tabs</h1>
 
     
-    <monster-tabs>
+    <monster-tabs
+    
+    data-monster-option-classes-button="monster-theme-secondary-1"
+    data-monster-option-classes-popper="monster-theme-secondary-1"
+    >
         <div>Tab 1</div>
         <div>Tab 2</div>
         <div>Tab 3</div>

source/components/form/style/tabs.pcss

+@import "../../style/property.pcss";
 @import "../../style/display.pcss";
 @import "../../style/border.pcss";
 @import "../../style/popper.pcss";
 @import "../../style/control.pcss";
 @import "../../style/badge.pcss";
+@import '../../style/mixin/button.pcss';
 @import '../../style/mixin/typography.pcss';
 @import '../../style/mixin/hover.pcss';
 
@@ -26,7 +28,8 @@ nav[data-monster-role=nav] {
     box-shadow: var(--monster-box-shadow-1);
     border-color: var(--monster-bg-color-primary-2);    
     
-    flex-wrap: nowrap
+    flex-wrap: nowrap;
+    
 }
 
 [data-monster-role=nav] button .remove-tab {
@@ -45,6 +48,10 @@ nav[data-monster-role=nav] {
 [data-monster-role=nav] button span {
     display: flex;
     white-space: pre;
+    font-family: var(--monster-font-family);
+    font-size: 1rem;
+    line-height: 1.4;
+    font-weight: normal;
 }
 
 [data-monster-role=nav] button {

source/components/form/tabs.mjs

@@ -225,6 +225,7 @@ class Tabs extends CustomElement {
 
 			classes: {
 				button: "monster-theme-primary-1",
+				popper: "monster-theme-primary-1",
 			},
 
 			popper: {
@@ -329,6 +330,10 @@ function initPopperSwitch() {
 		switchButton.setAttribute(ATTRIBUTE_ROLE, "switch");
 		switchButton.setAttribute("part", "switch");
 		switchButton.classList.add("hidden");
+		let classList = this.getOption("classes.button");
+		if (classList) {
+			switchButton.classList.add(classList);
+		}
 		switchButton.innerHTML =
 			'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"/></svg>';
 		this[navElementSymbol].prepend(switchButton);
@@ -1053,7 +1058,8 @@ function getTemplate() {
                  data-monster-attributes="data-monster-marker path:marker"
                  data-monster-insert="buttons path:buttons.standard">
                 <slot name="start" class="invisible"></slot>
-                <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="popper" part="popper" tabindex="-1"
+					 data-monster-attributes="class path:classes.popper">
                     <div data-popper-arrow></div>