@record-evolution/widget-navbutton 1.0.9 → 1.0.11

package/dist/widget-navbutton.js

@@ -1,16 +1,22 @@
-import { css as c, LitElement as h, html as u } from "lit";
-import { property as p, state as m, customElement as d } from "lit/decorators.js";
+import { css as d, LitElement as h, html as m } from "lit";
+import { property as c, state as u, customElement as p } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/button/filled-button.js";
-import "@material/web/ripple/ripple.js";
-var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (t, e, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? b(e, o) : e, n = t.length - 1, a; n >= 0; n--)
-    (a = t[n]) && (i = (r ? a(e, o, i) : a(i)) || i);
-  return r && i && f(e, o, i), i;
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, e, o, r) => {
+  for (var l = r > 1 ? void 0 : r ? b(e, o) : e, s = t.length - 1, a; s >= 0; s--)
+    (a = t[s]) && (l = (r ? a(e, o, l) : a(l)) || l);
+  return r && l && f(e, o, l), l;
 };
-let l = class extends h {
+const g = (t) => {
+  if (!t) return !0;
+  const e = t.trim().toLowerCase();
+  if (e === "transparent") return !0;
+  const o = e.match(/^(?:rgba|hsla)\([^)]*[,/]\s*([\d.]+%?)\s*\)$/);
+  return o ? parseFloat(o[1]) === 0 : /^#[0-9a-f]{8}$/.test(e) ? e.slice(7) === "00" : /^#[0-9a-f]{4}$/.test(e) ? e[4] === "0" : !1;
+};
+let i = class extends h {
   constructor() {
-    super(...arguments), this.version = "1.0.9";
+    super(...arguments), this.version = "1.0.11";
   }
   update(t) {
     t.has("theme") && this.registerTheme(this.theme), super.update(t);
@@ -19,8 +25,8 @@ let l = class extends h {
     this.registerTheme(this.theme);
   }
   registerTheme(t) {
-    const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), o = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim();
-    this.themeBgColor = o || this.theme?.theme_object?.backgroundColor, this.themeTitleColor = e || this.theme?.theme_object?.title?.textStyle?.color;
+    const e = getComputedStyle(this).getPropertyValue("--re-text-color").trim(), o = getComputedStyle(this).getPropertyValue("--re-tile-background-color").trim(), r = t?.theme_object?.backgroundColor;
+    this.themeBgColor = o || (g(r) ? void 0 : r), this.themeTitleColor = e || t?.theme_object?.title?.textStyle?.color;
   }
   handleNavItemClick() {
     let t;
@@ -42,35 +48,42 @@ let l = class extends h {
         o.label && (e = e.split(`{{${o.label}}}`).join(encodeURIComponent(String(o.value ?? ""))));
     if (e.includes("*")) {
       const o = (this.route || "").split("/").filter(Boolean), r = e.split("/").filter(Boolean);
-      for (let i = 0; i < r.length; i++)
-        r[i] === "*" && (r[i] = o[i] ?? "");
+      for (let l = 0; l < r.length; l++)
+        r[l] === "*" && (r[l] = o[l] ?? "");
       e = (e.startsWith("/") ? "/" : "") + r.filter(Boolean).join("/");
     }
     return e;
   }
   render() {
-    const t = this.inputData?.style?.fontSize ?? 16, e = (this.inputData?.style?.fontSize ?? 16) * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", r = this.inputData?.style?.backgroundColor || this.themeBgColor || "white";
-    return u`
+    const t = this.inputData?.style?.fontSize ?? 16, e = t * 1.5, o = this.inputData?.style?.color || this.themeTitleColor || "black", r = this.inputData?.style?.backgroundColor || this.themeBgColor || "white", l = Math.max(40, Math.round(t * 2.5));
+    return m`
             <md-filled-button
-                style="font-size: ${t}px; 
-                --md-filled-button-label-text-color: ${o}; 
+                style="--btn-fg: ${o};
+                font-size: ${t}px;
+                --md-filled-button-label-text-size: ${t}px;
+                --md-filled-button-container-height: ${l}px;
+                --md-filled-button-icon-size: ${e}px;
+                --md-filled-button-label-text-color: ${o};
                 --md-filled-button-hover-label-text-color: ${o};
                 --md-filled-button-pressed-label-text-color: ${o};
                 --md-filled-button-focus-label-text-color: ${o};
+                --md-filled-button-icon-color: ${o};
+                --md-filled-button-hover-icon-color: ${o};
+                --md-filled-button-pressed-icon-color: ${o};
+                --md-filled-button-focus-icon-color: ${o};
                 --md-filled-button-container-color: ${r};
                 "
                 @click=${() => this.handleNavItemClick()}
             >
                 ${this.inputData?.title}
-                <md-ripple></md-ripple>
-                <md-icon slot="icon" style="font-size: ${e}px; color: ${o}"
+                <md-icon slot="icon" style="--md-icon-size: ${e}px;"
                     >${this.inputData?.iconName}</md-icon
                 >
             </md-filled-button>
         `;
   }
 };
-l.styles = c`
+i.styles = d`
         :host {
             display: flex;
             align-items: center;
@@ -90,30 +103,33 @@ l.styles = c`
             flex: 1;
             --md-filled-button-container-shape: 4px;
             --md-filled-button-container-shadow-color: none;
-            --md-sys-color-primary: #006a6a;
-            --md-ripple-hover-color: var(--md-sys-color-primary);
-            --md-ripple-pressed-color: var(--md-sys-color-primary);
+            /* State layers follow the configured label color; a hard-coded
+               accent stays teal no matter how the button is styled. */
+            --md-ripple-hover-color: var(--btn-fg);
+            --md-ripple-pressed-color: var(--btn-fg);
+            --md-filled-button-hover-state-layer-color: var(--btn-fg);
+            --md-filled-button-pressed-state-layer-color: var(--btn-fg);
         }
     `;
-s([
-  p({ type: Object })
-], l.prototype, "inputData", 2);
-s([
-  p({ type: Object })
-], l.prototype, "theme", 2);
-s([
-  p({ type: String })
-], l.prototype, "route", 2);
-s([
-  m()
-], l.prototype, "themeBgColor", 2);
-s([
-  m()
-], l.prototype, "themeTitleColor", 2);
-l = s([
-  d("widget-navbutton-1.0.9")
-], l);
+n([
+  c({ type: Object })
+], i.prototype, "inputData", 2);
+n([
+  c({ type: Object })
+], i.prototype, "theme", 2);
+n([
+  c({ type: String })
+], i.prototype, "route", 2);
+n([
+  u()
+], i.prototype, "themeBgColor", 2);
+n([
+  u()
+], i.prototype, "themeTitleColor", 2);
+i = n([
+  p("widget-navbutton-1.0.11")
+], i);
 export {
-  l as WidgetNavbutton
+  i as WidgetNavbutton
 };
 //# sourceMappingURL=widget-navbutton.js.map

package/dist/widget-navbutton.js.map

@@ -1 +1 @@
-{"version":3,"file":"widget-navbutton.js","sources":["../src/widget-navbutton.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { InputData } from './definition-schema'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\nimport '@material/web/ripple/ripple.js'\n\ntype Theme = {\n    theme_name: string\n    theme_object: any\n}\n\n@customElement('widget-navbutton-versionplaceholder')\nexport class WidgetNavbutton extends LitElement {\n    @property({ type: Object }) inputData?: InputData\n    @property({ type: Object }) theme?: Theme\n    @property({ type: String }) route?: string\n\n    @state() private themeBgColor?: string\n    @state() private themeTitleColor?: string\n\n    version: string = 'versionplaceholder'\n\n    update(changedProperties: Map<string, any>) {\n        if (changedProperties.has('theme')) {\n            this.registerTheme(this.theme)\n        }\n\n        super.update(changedProperties)\n    }\n\n    protected firstUpdated(_changedProperties: PropertyValues): void {\n        this.registerTheme(this.theme)\n    }\n\n    registerTheme(theme?: Theme) {\n        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor\n        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color\n    }\n\n    handleNavItemClick() {\n        let goto: string\n        if (this.inputData?.route === '') {\n            goto = '/' + this.route?.split('/').filter(Boolean).slice(0, -1).join('/') + '/' || '/'\n            goto = goto === '//' ? '/' : goto\n        } else {\n            goto =\n                this.resolveRoute({\n                    route: this.inputData?.route,\n                    variables: this.inputData?.variables\n                }) || '/'\n        }\n        const event = new CustomEvent('nav-submit', {\n            detail: { path: goto },\n            bubbles: true,\n            composed: true\n        })\n        this.dispatchEvent(event)\n    }\n\n    resolveRoute(item?: any): string | undefined {\n        let route = String(item?.route ?? '')\n        if (item?.variables) {\n            for (const variable of item.variables) {\n                if (variable.label) {\n                    route = route\n                        .split(`{{${variable.label}}}`)\n                        .join(encodeURIComponent(String(variable.value ?? '')))\n                }\n            }\n        }\n        if (route.includes('*')) {\n            const currentSegments = (this.route || '').split('/').filter(Boolean)\n            const routeSegments = route.split('/').filter(Boolean)\n            for (let i = 0; i < routeSegments.length; i++) {\n                if (routeSegments[i] === '*') {\n                    routeSegments[i] = currentSegments[i] ?? ''\n                }\n            }\n            route = (route.startsWith('/') ? '/' : '') + routeSegments.filter(Boolean).join('/')\n        }\n        return route\n    }\n\n    static styles = css`\n        :host {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            font-family: sans-serif;\n            box-sizing: border-box;\n            margin: auto;\n            padding: 2cqh 2cqw;\n        }\n\n        md-icon {\n            font-family: 'Material Symbols Outlined';\n        }\n        md-filled-button {\n            flex: 1;\n            --md-filled-button-container-shape: 4px;\n            --md-filled-button-container-shadow-color: none;\n            --md-sys-color-primary: #006a6a;\n            --md-ripple-hover-color: var(--md-sys-color-primary);\n            --md-ripple-pressed-color: var(--md-sys-color-primary);\n        }\n    `\n\n    render() {\n        const fontSize = this.inputData?.style?.fontSize ?? 16\n        const iconFontSize = (this.inputData?.style?.fontSize ?? 16) * 1.5\n        const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'\n        const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'\n        const gap = fontSize * 0.4\n        return html`\n            <md-filled-button\n                style=\"font-size: ${fontSize}px; \n                --md-filled-button-label-text-color: ${fontColor}; \n                --md-filled-button-hover-label-text-color: ${fontColor};\n                --md-filled-button-pressed-label-text-color: ${fontColor};\n                --md-filled-button-focus-label-text-color: ${fontColor};\n                --md-filled-button-container-color: ${bgColor};\n                \"\n                @click=${() => this.handleNavItemClick()}\n            >\n                ${this.inputData?.title}\n                <md-ripple></md-ripple>\n                <md-icon slot=\"icon\" style=\"font-size: ${iconFontSize}px; color: ${fontColor}\"\n                    >${this.inputData?.iconName}</md-icon\n                >\n            </md-filled-button>\n        `\n    }\n}\n"],"names":["WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","cssTextColor","cssBgColor","goto","event","item","route","variable","currentSegments","routeSegments","fontSize","iconFontSize","fontColor","bgColor","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"widget-navbutton.js","sources":["../src/widget-navbutton.ts"],"sourcesContent":["import { html, css, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { NavigationButtonConfiguration } from './definition-schema'\n\nimport '@material/web/icon/icon.js'\nimport '@material/web/button/filled-button.js'\n\ntype Theme = {\n    theme_name: string\n    theme_object: any\n}\n\n/**\n * ECharts themes describe a *chart canvas*, and most of them set\n * `backgroundColor` to a fully transparent colour (the light theme uses\n * `rgba(0, 0, 0, 0)`). That is a valid, truthy colour string, so using it\n * verbatim as the button background paints nothing at all. Treat any\n * fully transparent theme colour as \"no colour\" so the fallback kicks in.\n */\nconst isTransparent = (color?: string) => {\n    if (!color) return true\n    const value = color.trim().toLowerCase()\n    if (value === 'transparent') return true\n    const functional = value.match(/^(?:rgba|hsla)\\([^)]*[,/]\\s*([\\d.]+%?)\\s*\\)$/)\n    if (functional) return parseFloat(functional[1]) === 0\n    // #rrggbbaa / #rgba\n    if (/^#[0-9a-f]{8}$/.test(value)) return value.slice(7) === '00'\n    if (/^#[0-9a-f]{4}$/.test(value)) return value[4] === '0'\n    return false\n}\n\n@customElement('widget-navbutton-versionplaceholder')\nexport class WidgetNavbutton extends LitElement {\n    @property({ type: Object }) inputData?: NavigationButtonConfiguration\n    @property({ type: Object }) theme?: Theme\n    @property({ type: String }) route?: string\n\n    @state() private themeBgColor?: string\n    @state() private themeTitleColor?: string\n\n    version: string = 'versionplaceholder'\n\n    update(changedProperties: Map<string, any>) {\n        if (changedProperties.has('theme')) {\n            this.registerTheme(this.theme)\n        }\n\n        super.update(changedProperties)\n    }\n\n    protected firstUpdated(_changedProperties: PropertyValues): void {\n        this.registerTheme(this.theme)\n    }\n\n    registerTheme(theme?: Theme) {\n        const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()\n        const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()\n        const themeBgColor = theme?.theme_object?.backgroundColor\n        this.themeBgColor = cssBgColor || (isTransparent(themeBgColor) ? undefined : themeBgColor)\n        this.themeTitleColor = cssTextColor || theme?.theme_object?.title?.textStyle?.color\n    }\n\n    handleNavItemClick() {\n        let goto: string\n        if (this.inputData?.route === '') {\n            goto = '/' + this.route?.split('/').filter(Boolean).slice(0, -1).join('/') + '/' || '/'\n            goto = goto === '//' ? '/' : goto\n        } else {\n            goto =\n                this.resolveRoute({\n                    route: this.inputData?.route,\n                    variables: this.inputData?.variables\n                }) || '/'\n        }\n        const event = new CustomEvent('nav-submit', {\n            detail: { path: goto },\n            bubbles: true,\n            composed: true\n        })\n        this.dispatchEvent(event)\n    }\n\n    resolveRoute(item?: any): string | undefined {\n        let route = String(item?.route ?? '')\n        if (item?.variables) {\n            for (const variable of item.variables) {\n                if (variable.label) {\n                    route = route\n                        .split(`{{${variable.label}}}`)\n                        .join(encodeURIComponent(String(variable.value ?? '')))\n                }\n            }\n        }\n        if (route.includes('*')) {\n            const currentSegments = (this.route || '').split('/').filter(Boolean)\n            const routeSegments = route.split('/').filter(Boolean)\n            for (let i = 0; i < routeSegments.length; i++) {\n                if (routeSegments[i] === '*') {\n                    routeSegments[i] = currentSegments[i] ?? ''\n                }\n            }\n            route = (route.startsWith('/') ? '/' : '') + routeSegments.filter(Boolean).join('/')\n        }\n        return route\n    }\n\n    static styles = css`\n        :host {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 100%;\n            height: 100%;\n            font-family: sans-serif;\n            box-sizing: border-box;\n            margin: auto;\n            padding: 2cqh 2cqw;\n        }\n\n        md-icon {\n            font-family: 'Material Symbols Outlined';\n        }\n        md-filled-button {\n            flex: 1;\n            --md-filled-button-container-shape: 4px;\n            --md-filled-button-container-shadow-color: none;\n            /* State layers follow the configured label color; a hard-coded\n               accent stays teal no matter how the button is styled. */\n            --md-ripple-hover-color: var(--btn-fg);\n            --md-ripple-pressed-color: var(--btn-fg);\n            --md-filled-button-hover-state-layer-color: var(--btn-fg);\n            --md-filled-button-pressed-state-layer-color: var(--btn-fg);\n        }\n    `\n\n    render() {\n        const fontSize = this.inputData?.style?.fontSize ?? 16\n        const iconFontSize = fontSize * 1.5\n        const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'\n        const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'\n        // The container height is a fixed 40px token, so it has to grow with the\n        // label or larger font sizes overflow the button.\n        const buttonHeight = Math.max(40, Math.round(fontSize * 2.5))\n        return html`\n            <md-filled-button\n                style=\"--btn-fg: ${fontColor};\n                font-size: ${fontSize}px;\n                --md-filled-button-label-text-size: ${fontSize}px;\n                --md-filled-button-container-height: ${buttonHeight}px;\n                --md-filled-button-icon-size: ${iconFontSize}px;\n                --md-filled-button-label-text-color: ${fontColor};\n                --md-filled-button-hover-label-text-color: ${fontColor};\n                --md-filled-button-pressed-label-text-color: ${fontColor};\n                --md-filled-button-focus-label-text-color: ${fontColor};\n                --md-filled-button-icon-color: ${fontColor};\n                --md-filled-button-hover-icon-color: ${fontColor};\n                --md-filled-button-pressed-icon-color: ${fontColor};\n                --md-filled-button-focus-icon-color: ${fontColor};\n                --md-filled-button-container-color: ${bgColor};\n                \"\n                @click=${() => this.handleNavItemClick()}\n            >\n                ${this.inputData?.title}\n                <md-icon slot=\"icon\" style=\"--md-icon-size: ${iconFontSize}px;\"\n                    >${this.inputData?.iconName}</md-icon\n                >\n            </md-filled-button>\n        `\n    }\n}\n"],"names":["isTransparent","color","value","functional","WidgetNavbutton","LitElement","changedProperties","_changedProperties","theme","cssTextColor","cssBgColor","themeBgColor","goto","event","item","route","variable","currentSegments","routeSegments","i","fontSize","iconFontSize","fontColor","bgColor","buttonHeight","html","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-navbutton following open-wc recommendations",
     "license": "MIT",
     "author": "widget-navbutton",
-    "version": "1.0.9",
+    "version": "1.0.11",
     "engines": {
         "node": ">=24.9.0",
         "npm": ">=10.0.2"
@@ -28,7 +28,7 @@
         "release": "npm run build && npm run types && npm version patch --tag-version-prefix='' && git push && git push --tag && npm run build"
     },
     "dependencies": {
-        "lit": "^3.3.2",
+        "lit": "^3.3.3",
         "tslib": "^2.8.1"
     },
     "peerDependencies": {

package/src/default-data.json

@@ -3,7 +3,6 @@
     "iconName": "arrow_back",
     "route": "",
     "style": {
-        "fontSize": 16,
-        "fontWeight": 400
+        "fontSize": 16
     }
 }

package/src/definition-schema.d.ts

@@ -41,7 +41,7 @@ export type FontSize = number;
 /**
  * A navigation button widget for in-dashboard navigation between pages or sections. Use this widget to create clickable buttons that navigate users to different dashboard views, external pages, or perform back navigation. Supports Material Design icons and customizable styling. Ideal for creating navigation flows, back buttons, call-to-action links, or any clickable element that should route users to another location.
  */
-export interface InputData {
+export interface NavigationButtonConfiguration {
     title?: Label;
     iconName?: IconName;
     route?: Navigation;

package/src/definition-schema.json

@@ -1,6 +1,19 @@
 {
-    "title": "Input Data",
+    "title": "Navigation Button Configuration",
     "description": "A navigation button widget for in-dashboard navigation between pages or sections. Use this widget to create clickable buttons that navigate users to different dashboard views, external pages, or perform back navigation. Supports Material Design icons and customizable styling. Ideal for creating navigation flows, back buttons, call-to-action links, or any clickable element that should route users to another location.",
+    "aiSelection": {
+        "dataShape": "A single destination: a label, an icon and a route, plus optional route variables. No data input.",
+        "useWhen": [
+            "One clickable element should take the user somewhere — a detail page, an external site, or back.",
+            "A call to action belongs next to specific content rather than in a navigation menu."
+        ],
+        "notFor": [
+            "Several destinations that belong together as a menu — use widget-navbar or widget-sidenav.",
+            "A button that writes or submits data — use widget-form.",
+            "A button that commands a device — use widget-switch, or widget-scada for an industrial symbol.",
+            "Per-row links inside a list of records — use widget-table with a column of type 'button'."
+        ]
+    },
     "type": "object",
     "properties": {
         "title": {

package/src/widget-navbutton.ts

@@ -1,19 +1,37 @@
 import { html, css, LitElement, PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
-import { InputData } from './definition-schema'
+import { NavigationButtonConfiguration } from './definition-schema'
 
 import '@material/web/icon/icon.js'
 import '@material/web/button/filled-button.js'
-import '@material/web/ripple/ripple.js'
 
 type Theme = {
     theme_name: string
     theme_object: any
 }
 
+/**
+ * ECharts themes describe a *chart canvas*, and most of them set
+ * `backgroundColor` to a fully transparent colour (the light theme uses
+ * `rgba(0, 0, 0, 0)`). That is a valid, truthy colour string, so using it
+ * verbatim as the button background paints nothing at all. Treat any
+ * fully transparent theme colour as "no colour" so the fallback kicks in.
+ */
+const isTransparent = (color?: string) => {
+    if (!color) return true
+    const value = color.trim().toLowerCase()
+    if (value === 'transparent') return true
+    const functional = value.match(/^(?:rgba|hsla)\([^)]*[,/]\s*([\d.]+%?)\s*\)$/)
+    if (functional) return parseFloat(functional[1]) === 0
+    // #rrggbbaa / #rgba
+    if (/^#[0-9a-f]{8}$/.test(value)) return value.slice(7) === '00'
+    if (/^#[0-9a-f]{4}$/.test(value)) return value[4] === '0'
+    return false
+}
+
 @customElement('widget-navbutton-versionplaceholder')
 export class WidgetNavbutton extends LitElement {
-    @property({ type: Object }) inputData?: InputData
+    @property({ type: Object }) inputData?: NavigationButtonConfiguration
     @property({ type: Object }) theme?: Theme
     @property({ type: String }) route?: string
 
@@ -37,8 +55,9 @@ export class WidgetNavbutton extends LitElement {
     registerTheme(theme?: Theme) {
         const cssTextColor = getComputedStyle(this).getPropertyValue('--re-text-color').trim()
         const cssBgColor = getComputedStyle(this).getPropertyValue('--re-tile-background-color').trim()
-        this.themeBgColor = cssBgColor || this.theme?.theme_object?.backgroundColor
-        this.themeTitleColor = cssTextColor || this.theme?.theme_object?.title?.textStyle?.color
+        const themeBgColor = theme?.theme_object?.backgroundColor
+        this.themeBgColor = cssBgColor || (isTransparent(themeBgColor) ? undefined : themeBgColor)
+        this.themeTitleColor = cssTextColor || theme?.theme_object?.title?.textStyle?.color
     }
 
     handleNavItemClick() {
@@ -105,32 +124,44 @@ export class WidgetNavbutton extends LitElement {
             flex: 1;
             --md-filled-button-container-shape: 4px;
             --md-filled-button-container-shadow-color: none;
-            --md-sys-color-primary: #006a6a;
-            --md-ripple-hover-color: var(--md-sys-color-primary);
-            --md-ripple-pressed-color: var(--md-sys-color-primary);
+            /* State layers follow the configured label color; a hard-coded
+               accent stays teal no matter how the button is styled. */
+            --md-ripple-hover-color: var(--btn-fg);
+            --md-ripple-pressed-color: var(--btn-fg);
+            --md-filled-button-hover-state-layer-color: var(--btn-fg);
+            --md-filled-button-pressed-state-layer-color: var(--btn-fg);
         }
     `
 
     render() {
         const fontSize = this.inputData?.style?.fontSize ?? 16
-        const iconFontSize = (this.inputData?.style?.fontSize ?? 16) * 1.5
+        const iconFontSize = fontSize * 1.5
         const fontColor = this.inputData?.style?.color || this.themeTitleColor || 'black'
         const bgColor = this.inputData?.style?.backgroundColor || this.themeBgColor || 'white'
-        const gap = fontSize * 0.4
+        // The container height is a fixed 40px token, so it has to grow with the
+        // label or larger font sizes overflow the button.
+        const buttonHeight = Math.max(40, Math.round(fontSize * 2.5))
         return html`
             <md-filled-button
-                style="font-size: ${fontSize}px; 
-                --md-filled-button-label-text-color: ${fontColor}; 
+                style="--btn-fg: ${fontColor};
+                font-size: ${fontSize}px;
+                --md-filled-button-label-text-size: ${fontSize}px;
+                --md-filled-button-container-height: ${buttonHeight}px;
+                --md-filled-button-icon-size: ${iconFontSize}px;
+                --md-filled-button-label-text-color: ${fontColor};
                 --md-filled-button-hover-label-text-color: ${fontColor};
                 --md-filled-button-pressed-label-text-color: ${fontColor};
                 --md-filled-button-focus-label-text-color: ${fontColor};
+                --md-filled-button-icon-color: ${fontColor};
+                --md-filled-button-hover-icon-color: ${fontColor};
+                --md-filled-button-pressed-icon-color: ${fontColor};
+                --md-filled-button-focus-icon-color: ${fontColor};
                 --md-filled-button-container-color: ${bgColor};
                 "
                 @click=${() => this.handleNavItemClick()}
             >
                 ${this.inputData?.title}
-                <md-ripple></md-ripple>
-                <md-icon slot="icon" style="font-size: ${iconFontSize}px; color: ${fontColor}"
+                <md-icon slot="icon" style="--md-icon-size: ${iconFontSize}px;"
                     >${this.inputData?.iconName}</md-icon
                 >
             </md-filled-button>