@trinityui/design-system 2.1.0 → 2.1.1

package/dist/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/dist/theme.js

@@ -1,44 +1,44 @@
 import { createTheme as M, useTheme as C } from "@mui/material/styles";
-import { t as p, c as o, d as m, e as R, s as v, a as h } from "./app-shell.js";
+import { t, c as o, d as x, e as R, s as m, a as y } from "./app-shell.js";
 import { g as Z, j as q, f as J, o as K, m as Q, p as U, n as Y, h as _, k, i as S, l as rr } from "./app-shell.js";
-import { useMemo as O } from "react";
-function w(...r) {
+import { useMemo as w } from "react";
+function O(...r) {
   return `--trinity-${r.join("-").replace(/([A-Z])/g, "-$1").toLowerCase()}`;
 }
-function e(r, a = []) {
+function i(r, a = []) {
   const s = [];
-  for (const [i, c] of Object.entries(r)) {
-    const n = [...a, i];
+  for (const [e, c] of Object.entries(r)) {
+    const u = [...a, e];
     if (c != null)
       if (typeof c == "object" && !Array.isArray(c))
-        s.push(...e(c, n));
+        s.push(...i(c, u));
       else {
-        const t = typeof c == "number" && !i.includes("opacity") && !i.includes("weight") && !i.includes("Height") ? `${c}px` : String(c);
-        s.push({ name: w(...n), value: t });
+        const n = typeof c == "number" && !e.includes("opacity") && !e.includes("weight") && !e.includes("Height") ? `${c}px` : String(c);
+        s.push({ name: O(...u), value: n });
       }
   }
   return s;
 }
-function z(r = p) {
+function z(r = t) {
   const a = [];
-  return a.push(...e(r.base.colors, ["color"])), a.push(...e(r.base.spacing, ["spacing"])), a.push(...e(r.base.fontSize, ["font-size"])), a.push(...e(r.base.fontWeight, ["font-weight"])), a.push(...e(r.base.lineHeight, ["line-height"])), a.push(...e(r.base.letterSpacing, ["letter-spacing"])), a.push(...e(r.base.borderRadius, ["radius"])), a.push(...e(r.base.borderWidth, ["border-width"])), a.push(...e(r.base.shadows, ["shadow"])), a.push(...e(r.base.zIndex, ["z-index"])), a.push(...e(r.base.duration, ["duration"])), a.push(...e(r.base.easing, ["easing"])), a.push(...e(r.base.opacity, ["opacity"])), a.push(...e(r.base.breakpoints, ["breakpoint"])), a.push(...e(r.semantic.colors, ["semantic"])), a.push(...e(r.semantic.spacing, ["semantic-spacing"])), a.push(...e(r.semantic.borders, ["semantic-border"])), a.push(...e(r.semantic.shadows, ["semantic-shadow"])), a.push(...e(r.semantic.motion, ["motion"])), a.push(...e(r.component, ["component"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
+  return a.push(...i(r.base.colors, ["color"])), a.push(...i(r.base.spacing, ["spacing"])), a.push(...i(r.base.fontSize, ["font-size"])), a.push(...i(r.base.fontWeight, ["font-weight"])), a.push(...i(r.base.lineHeight, ["line-height"])), a.push(...i(r.base.letterSpacing, ["letter-spacing"])), a.push(...i(r.base.borderRadius, ["radius"])), a.push(...i(r.base.borderWidth, ["border-width"])), a.push(...i(r.base.shadows, ["shadow"])), a.push(...i(r.base.zIndex, ["z-index"])), a.push(...i(r.base.duration, ["duration"])), a.push(...i(r.base.easing, ["easing"])), a.push(...i(r.base.opacity, ["opacity"])), a.push(...i(r.base.breakpoints, ["breakpoint"])), a.push(...i(r.semantic.colors, ["semantic"])), a.push(...i(r.semantic.spacing, ["semantic-spacing"])), a.push(...i(r.semantic.borders, ["semantic-border"])), a.push(...i(r.semantic.shadows, ["semantic-shadow"])), a.push(...i(r.semantic.motion, ["motion"])), a.push(...i(r.component, ["component"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
 `);
 }
-function $(r = p) {
+function $(r = t) {
   const a = [];
-  return a.push(...e(r.darkMode.colors.text, ["semantic", "text"])), a.push(...e(r.darkMode.colors.background, ["semantic", "background"])), a.push(...e(r.darkMode.colors.border, ["semantic", "border"])), r.darkMode.colors.interactive && a.push(...e(r.darkMode.colors.interactive, ["semantic", "interactive"])), r.darkMode.colors.status && a.push(...e(r.darkMode.colors.status, ["semantic", "status"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
+  return a.push(...i(r.darkMode.colors.text, ["semantic", "text"])), a.push(...i(r.darkMode.colors.background, ["semantic", "background"])), a.push(...i(r.darkMode.colors.border, ["semantic", "border"])), r.darkMode.colors.interactive && a.push(...i(r.darkMode.colors.interactive, ["semantic", "interactive"])), r.darkMode.colors.status && a.push(...i(r.darkMode.colors.status, ["semantic", "status"])), a.map((s) => `  ${s.name}: ${s.value};`).join(`
 `);
 }
-function I(r = p) {
+function D(r = t) {
   if (typeof window > "u") return;
   const a = z(r), s = document.createElement("style");
   s.id = "trinity-css-variables", s.textContent = `:root {
 ${a}
 }`;
-  const i = document.getElementById("trinity-css-variables");
-  i && i.remove(), document.head.appendChild(s);
+  const e = document.getElementById("trinity-css-variables");
+  e && e.remove(), document.head.appendChild(s);
 }
-function D(r = p) {
+function I(r = t) {
   if (typeof window > "u") return;
   const a = $(r), s = document.createElement("style");
   s.id = "trinity-dark-mode-variables", s.textContent = `
@@ -53,29 +53,29 @@ ${a}
 ${a}
   }
 }`;
-  const i = document.getElementById("trinity-dark-mode-variables");
-  i && i.remove(), document.head.appendChild(s);
+  const e = document.getElementById("trinity-dark-mode-variables");
+  e && e.remove(), document.head.appendChild(s);
 }
 function W(r, a) {
-  function s(t) {
-    let g = t.replace("#", "");
+  function s(n) {
+    let g = n.replace("#", "");
     g.length === 3 && (g = g.split("").map((l) => l + l).join(""));
-    const u = parseInt(g, 16);
-    return [u >> 16 & 255, u >> 8 & 255, u & 255];
+    const p = parseInt(g, 16);
+    return [p >> 16 & 255, p >> 8 & 255, p & 255];
   }
-  function i([t, g, u]) {
-    const l = [t, g, u].map((b) => (b /= 255, b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)));
+  function e([n, g, p]) {
+    const l = [n, g, p].map((b) => (b /= 255, b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4)));
     return 0.2126 * l[0] + 0.7152 * l[1] + 0.0722 * l[2];
   }
-  const c = i(s(r)), n = i(s(a));
-  return (Math.max(c, n) + 0.05) / (Math.min(c, n) + 0.05);
+  const c = e(s(r)), u = e(s(a));
+  return (Math.max(c, u) + 0.05) / (Math.min(c, u) + 0.05);
 }
 function P(r, a, s = 4.5) {
-  const i = W(r, a);
-  return i < s && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${i.toFixed(2)} for ${r} on ${a}`), i >= s;
+  const e = W(r, a);
+  return e < s && typeof window < "u" && console.warn(`[Trinity] Low contrast ratio ${e.toFixed(2)} for ${r} on ${a}`), e >= s;
 }
-function T(r = p, a = "light") {
-  const s = a === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], i = a === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300];
+function T(r = t, a = "light") {
+  const s = a === "dark" ? "rgba(255, 255, 255, 0.12)" : r.base.colors.gray[200], e = a === "dark" ? "rgba(255, 255, 255, 0.2)" : r.base.colors.gray[300];
   return {
     MuiCssBaseline: {
       styleOverrides: {
@@ -100,66 +100,121 @@ function T(r = p, a = "light") {
         root: {
           padding: `${r.base.spacing[2]}px ${r.base.spacing[5]}px`,
           borderRadius: r.base.borderRadius.full,
-          fontWeight: r.base.fontWeight.semibold
+          fontWeight: r.base.fontWeight.semibold,
+          // Disabled state (all variants)
+          "&.Mui-disabled": {
+            backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[200],
+            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
+          }
         },
-        // Text buttons (default variant)
+        // ── Text buttons ──
         text: {
           color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900],
           "&:hover": {
             backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hover
-            // 8% black - using semantic token
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
+          },
+          "&.Mui-disabled": {
+            backgroundColor: "transparent"
           }
         },
         textPrimary: {
           color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           "&:hover": {
             backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
-            // 8%
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.20)" : r.semantic.effects.overlay.pressed
           }
         },
         textSecondary: {
           color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
           "&:hover": {
             backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
-            // 8%
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.20)" : r.semantic.effects.overlay.pressed
           }
         },
-        // Contained buttons
+        // ── Contained buttons ──
         contained: {
           color: r.base.colors.gray[0]
         },
         containedPrimary: {
-          backgroundColor: r.base.colors.navy[900],
+          backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.navy[900],
           color: r.base.colors.gray[0],
           "&:hover": {
-            backgroundColor: r.base.colors.coral[800]
+            backgroundColor: a === "dark" ? r.base.colors.coral[500] : r.base.colors.coral[800]
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800]
           }
         },
         containedSecondary: {
-          backgroundColor: r.base.colors.indigo[900],
+          backgroundColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[900],
           color: r.base.colors.gray[0],
           "&:hover": {
-            backgroundColor: r.base.colors.coral[800],
-            color: r.base.colors.gray[0]
+            backgroundColor: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[800]
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700]
           }
         },
-        // Outlined buttons
+        // ── Outlined buttons ──
         outlined: {
-          borderColor: r.base.colors.navy[900],
-          color: r.base.colors.navy[900],
           borderWidth: 2,
+          borderColor: a === "dark" ? r.base.colors.gray[500] : r.base.colors.navy[900],
+          color: a === "dark" ? r.base.colors.gray[100] : r.base.colors.navy[900],
           "&:hover": {
-            backgroundColor: r.base.colors.coral[800],
-            borderColor: r.base.colors.coral[800],
-            color: r.base.colors.gray[0],
-            borderWidth: 2
+            borderWidth: 2,
+            backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
+            borderColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
+            color: r.base.colors.gray[0]
+          },
+          "&:active": {
+            borderWidth: 2,
+            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
+            borderColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
+            color: r.base.colors.gray[0]
+          },
+          "&.Mui-disabled": {
+            borderWidth: 2,
+            borderColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[300],
+            backgroundColor: "transparent",
+            color: a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]
           }
         },
         outlinedPrimary: {
           borderColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          "&:hover": {
+            backgroundColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
+            borderColor: a === "dark" ? r.base.colors.coral[600] : r.base.colors.coral[800],
+            color: r.base.colors.gray[0]
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
+            borderColor: a === "dark" ? r.base.colors.coral[700] : r.base.colors.navy[800],
+            color: r.base.colors.gray[0]
+          }
+        },
+        outlinedSecondary: {
+          borderColor: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
+          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.indigo[900],
+          "&:hover": {
+            backgroundColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
+            borderColor: a === "dark" ? r.base.colors.purple[500] : r.base.colors.indigo[800],
+            color: r.base.colors.gray[0]
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
+            borderColor: a === "dark" ? r.base.colors.purple[600] : r.base.colors.indigo[700],
+            color: r.base.colors.gray[0]
+          }
         },
-        // Size variants
+        // ── Size variants ──
         sizeSmall: {
           padding: `${r.base.spacing[1]}px ${r.base.spacing[3]}px`,
           fontSize: r.base.fontSize.sm
@@ -176,12 +231,14 @@ function T(r = p, a = "light") {
       },
       styleOverrides: {
         root: {
-          borderRadius: r.base.borderRadius.md,
+          borderRadius: r.base.borderRadius.lg,
+          // 12px — matches component tokens
+          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)" : "0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08)",
+          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base,
           transition: "box-shadow 0.2s ease-in-out, border-color 0.2s ease-in-out",
           "&:hover": {
-            boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)" : "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+            boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.md
           }
         }
       }
@@ -192,31 +249,33 @@ function T(r = p, a = "light") {
       },
       styleOverrides: {
         root: {
-          borderRadius: r.base.borderRadius.md,
+          borderRadius: r.base.borderRadius.lg,
+          // 12px — consistent with cards
+          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.2)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
         },
         rounded: {
-          borderRadius: r.base.borderRadius.md
+          borderRadius: r.base.borderRadius.lg
         },
         elevation0: {
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.2)" : "0 1px 2px 0 rgb(0 0 0 / 0.05)"
+          boxShadow: a === "dark" ? "0 1px 2px 0 rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.sm
         },
         elevation1: {
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3)" : "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
+          boxShadow: a === "dark" ? "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.base
         },
         elevation2: {
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4)" : "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+          boxShadow: a === "dark" ? "0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.md
         },
         elevation3: {
           border: `1px solid ${s}`,
-          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5)" : "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
+          boxShadow: a === "dark" ? "0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.05)" : r.base.shadows.lg
         },
         outlined: {
-          border: `1px solid ${i}`,
+          border: `1px solid ${e}`,
           boxShadow: "none"
         }
       }
@@ -228,13 +287,22 @@ function T(r = p, a = "light") {
           "&:hover": {
             backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
             // 4% black
+          },
+          "&:active": {
+            backgroundColor: a === "dark" ? r.semantic.effects.onDark.tint : r.semantic.effects.overlay.pressed
           }
         },
         colorPrimary: {
-          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]
+          color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(255, 97, 80, 0.12)" : r.semantic.effects.overlay.hover
+          }
         },
         colorSecondary: {
-          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800]
+          color: a === "dark" ? r.base.colors.purple[400] : r.base.colors.coral[800],
+          "&:hover": {
+            backgroundColor: a === "dark" ? "rgba(120, 65, 201, 0.12)" : r.semantic.effects.overlay.hover
+          }
         }
       }
     },
@@ -251,8 +319,37 @@ function T(r = p, a = "light") {
       styleOverrides: {
         paper: {
           borderRadius: r.base.borderRadius.xl,
-          // 16px for dialogs - allows nested cards with lg:12px
-          border: `1px solid ${s}`
+          // 16px — allows nested cards with lg:12px
+          backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[0],
+          border: `1px solid ${s}`,
+          boxShadow: a === "dark" ? "0 25px 50px -12px rgb(0 0 0 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.1)" : r.base.shadows["2xl"]
+        }
+      }
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontSize: r.base.fontSize.lg,
+          fontWeight: r.base.fontWeight.semibold,
+          padding: `${r.base.spacing[5]}px ${r.base.spacing[6]}px`,
+          paddingBottom: r.base.spacing[3],
+          color: a === "dark" ? r.base.colors.gray[50] : r.base.colors.gray[900]
+        }
+      }
+    },
+    MuiDialogContent: {
+      styleOverrides: {
+        root: {
+          padding: `${r.base.spacing[3]}px ${r.base.spacing[6]}px`,
+          color: a === "dark" ? r.base.colors.gray[300] : r.base.colors.gray[600]
+        }
+      }
+    },
+    MuiDialogActions: {
+      styleOverrides: {
+        root: {
+          padding: `${r.base.spacing[3]}px ${r.base.spacing[6]}px ${r.base.spacing[5]}px`,
+          gap: r.base.spacing[2]
         }
       }
     },
@@ -537,8 +634,8 @@ function T(r = p, a = "light") {
           },
           "& .MuiSwitch-track": {
             borderRadius: 32 / 2,
-            backgroundColor: a === "dark" ? r.base.colors.gray[700] : r.base.colors.gray[300],
-            border: `2px solid ${a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[400]}`,
+            backgroundColor: a === "dark" ? r.base.colors.gray[600] : r.base.colors.gray[200],
+            border: `2px solid ${a === "dark" ? r.base.colors.gray[500] : r.base.colors.gray[300]}`,
             opacity: 1,
             transition: "background-color 300ms, border-color 300ms",
             boxSizing: "border-box"
@@ -788,6 +885,16 @@ function T(r = p, a = "light") {
       }
     },
     // ============================================
+    // APP BAR / HEADER
+    // ============================================
+    MuiAppBar: {
+      styleOverrides: {
+        root: {
+          borderRadius: 0
+        }
+      }
+    },
+    // ============================================
     // DRAWER / SIDEBAR
     // ============================================
     MuiDrawer: {
@@ -809,7 +916,7 @@ function T(r = p, a = "light") {
         indicator: {
           backgroundColor: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
           height: 3,
-          borderRadius: r.base.borderRadius.full
+          borderRadius: 2
         }
       }
     },
@@ -821,14 +928,20 @@ function T(r = p, a = "light") {
           fontSize: r.base.fontSize.sm,
           minHeight: 40,
           padding: `${r.base.spacing[2]}px ${r.base.spacing[4]}px`,
+          borderRadius: r.base.borderRadius.xs,
           color: a === "dark" ? r.base.colors.gray[400] : r.base.colors.gray[600],
+          transition: "color 0.2s ease, background-color 0.2s ease",
           "&:hover": {
             color: a === "dark" ? r.base.colors.gray[200] : r.base.colors.gray[900],
-            backgroundColor: a === "dark" ? "rgba(255, 255, 255, 0.04)" : "rgba(0, 0, 0, 0.02)"
+            backgroundColor: a === "dark" ? r.semantic.effects.onDark.subtle : r.semantic.effects.overlay.hoverSubtle
           },
           "&.Mui-selected": {
             color: a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900],
             fontWeight: r.base.fontWeight.semibold
+          },
+          "&:focus-visible": {
+            outline: `2px solid ${a === "dark" ? r.base.colors.coral[400] : r.base.colors.navy[900]}`,
+            outlineOffset: -2
           }
         }
       }
@@ -1055,27 +1168,27 @@ function E(r) {
   const {
     mode: a,
     name: s = "custom",
-    tokens: i,
+    tokens: e,
     palette: c,
-    components: n,
-    typography: t,
+    components: u,
+    typography: n,
     shape: g,
-    config: u = {}
-  } = r, l = y(a, i);
+    config: p = {}
+  } = r, l = h(a, e);
   return {
     theme: M(l, {
       palette: c,
-      components: n,
-      typography: t,
+      components: u,
+      typography: n,
       shape: g
     }),
     name: s,
     mode: a,
-    config: u
+    config: p
   };
 }
-function y(r, a) {
-  const s = { ...p, ...a }, i = r === "dark" ? {
+function h(r, a) {
+  const s = { ...t, ...a }, e = r === "dark" ? {
     mode: "dark",
     primary: { main: s.base.colors.coral[600], ...s.base.colors.coral },
     secondary: { main: s.base.colors.purple[500], ...s.base.colors.purple },
@@ -1246,7 +1359,7 @@ function y(r, a) {
     }
   };
   return M({
-    palette: i,
+    palette: e,
     typography: c,
     shape: {
       borderRadius: s.base.borderRadius.md
@@ -1295,42 +1408,42 @@ const d = {
   // Accent colors on navy background
   coralOnNavy: { text: d.secondary.main, bg: d.primary.main },
   azureOnNavy: { text: d.secondary.light, bg: d.primary.main }
-}, V = y("light"), j = y("dark");
+}, V = h("light"), j = h("dark");
 function N() {
   const a = C().palette.mode, s = a === "dark";
-  return O(() => ({
-    tokens: p,
-    base: h,
-    semantic: v,
+  return w(() => ({
+    tokens: t,
+    base: y,
+    semantic: m,
     component: R,
-    darkMode: m,
+    darkMode: x,
     mode: a,
     isDarkMode: s,
     getColor: (l, b) => s && b ? b : l,
     getSemanticColor: (l, b) => {
-      const x = v.colors[l]?.[b];
+      const v = m.colors[l]?.[b];
       if (s) {
-        const f = m.colors[l]?.[b];
+        const f = x.colors[l]?.[b];
         if (f) return f;
       }
-      return typeof x == "string" ? x : "";
+      return typeof v == "string" ? v : "";
     },
-    spacing: (l) => h.spacing[l],
-    spacingCss: (l) => `${h.spacing[l]}px`,
-    radius: (l) => h.borderRadius[l],
-    shadow: (l) => h.shadows[l]
+    spacing: (l) => y.spacing[l],
+    spacingCss: (l) => `${y.spacing[l]}px`,
+    radius: (l) => y.borderRadius[l],
+    shadow: (l) => y.shadows[l]
   }), [s, a]);
 }
 export {
   L as accessibleCombinations,
   Z as attentionHierarchy,
-  h as baseTokens,
+  y as baseTokens,
   d as brandColors,
   R as componentTokens,
   q as contrastHierarchy,
-  y as createTrinityTheme,
+  h as createTrinityTheme,
   E as createTrinityThemePreset,
-  m as darkModeTokens,
+  x as darkModeTokens,
   j as darkTheme,
   J as elevationHierarchy,
   z as generateCssVariables,
@@ -1341,14 +1454,14 @@ export {
   U as getHierarchySpacing,
   Y as getTypography,
   _ as hierarchy,
-  D as injectDarkModeCssVariables,
-  I as injectTrinityCssVariables,
+  I as injectDarkModeCssVariables,
+  D as injectTrinityCssVariables,
   k as interactiveHierarchy,
   V as lightTheme,
   S as scaleHierarchy,
-  v as semanticTokens,
+  m as semanticTokens,
   rr as spacingHierarchy,
-  p as tokens,
+  t as tokens,
   o as typographicHierarchy,
   N as useTrinityTokens,
   P as validateAccessibility