@saasquatch/mint-components 1.15.0-4 → 1.15.0-41

package/dist/cjs/sqm-tabs.cjs.entry.js

@@ -9,7 +9,7 @@ const utils = require('./utils-6847bc06.js');
 const reRender = require('./re-render-b324deab.js');
 const useChildElements = require('./useChildElements-1b35d945.js');
 
-const TabsView = ({ content, placement, }) => {
+const TabsView = ({ content, placement, textColor = "var(--sqm-text)", }) => {
   // Vertical padding for top & bottom placement, horizontal for left & right.
   const padding = !placement || placement === "top" || placement === "bottom"
     ? "var(--sl-spacing-x-large) 0;"
@@ -18,6 +18,18 @@ const TabsView = ({ content, placement, }) => {
     sl-tab-panel::part(base) {
       padding: ${padding};
     }
+
+    sl-tab::part(base) {
+      color: ${textColor};
+    }
+
+    sl-tab-group {
+      --sl-color-primary-500: var(--sqm-accent-color-icon);
+    }
+
+    sl-tab-group::part(tabs) {
+      border-bottom: 2px solid var(--sqm-border-color);
+    }
   `;
   return (index.h(index.Host, null,
     index.h("style", { type: "text/css" }, vanillaStyle),
@@ -29,7 +41,7 @@ const TabsView = ({ content, placement, }) => {
             index.h("slot", { name: slotName }))));
       }
       return [
-        index.h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
+        index.h("sl-tab", { slot: "nav", panel: slotName, part: "tab", id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
         index.h("sl-tab-panel", { name: slotName },
           index.h("slot", { name: slotName })),
       ];
@@ -91,8 +103,8 @@ const Tabs = class {
   disconnectedCallback() { }
   render() {
     const { content } = useTabs();
-    const { placement } = utils.getProps(this);
-    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
+    const { placement, textColor } = utils.getProps(this);
+    return (index.h(TabsView, { placement: placement, content: content, textColor: textColor }, index.h("slot", null)));
   }
 };