From 19fa15fe7e06056d93815cacfd4b3f9cb42258f1 Mon Sep 17 00:00:00 2001
From: struong <struong996@gmail.com>
Date: Wed, 11 Nov 2026 20:31:16 -0500
Subject: [PATCH] fix(earn): inset the vault demo select chevrons

---
 src/components/TempoMcpExplorer.recipes.ts     |  7 +++----
 src/components/guides/EarnVaultDemo.recipes.ts | 17 +++++++++++++++++
 src/styles/select-chevron.ts                   |  8 ++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/select-chevron.ts

diff --git a/src/components/TempoMcpExplorer.recipes.ts b/src/components/TempoMcpExplorer.recipes.ts
index 7a8d4e5b0..06f16be4e 100644
--- a/src/components/TempoMcpExplorer.recipes.ts
+++ b/src/components/TempoMcpExplorer.recipes.ts
@@ -1,5 +1,6 @@
 import { inherited } from '../styles/inherited'
 import { style } from '../styles/recipes'
+import { selectChevron } from '../styles/select-chevron'
 import { vars as tokens } from '../styles/theme'
 export const resultViewLayout = style({
   selectors: {
@@ -169,15 +170,13 @@ export const select = style({
     '&:is(select)': {
       appearance: 'none',
       paddingInlineEnd: tokens.spacing['10'],
-      backgroundImage:
-        "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
+      backgroundImage: selectChevron.light,
       backgroundRepeat: 'no-repeat',
       backgroundPosition: 'right 16px center',
       backgroundSize: '16px 16px',
     },
     ':root[data-vocs-theme="dark"] &:is(select)': {
-      backgroundImage:
-        "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
+      backgroundImage: selectChevron.dark,
     },
     ':dir(rtl) &:is(select)': {
       backgroundPosition: 'left 16px center',
diff --git a/src/components/guides/EarnVaultDemo.recipes.ts b/src/components/guides/EarnVaultDemo.recipes.ts
index 3527e6d63..4a58039b5 100644
--- a/src/components/guides/EarnVaultDemo.recipes.ts
+++ b/src/components/guides/EarnVaultDemo.recipes.ts
@@ -1,5 +1,6 @@
 import { inherited } from '../../styles/inherited'
 import { style } from '../../styles/recipes'
+import { selectChevron } from '../../styles/select-chevron'
 import { vars as tokens } from '../../styles/theme'
 export const earnVaultDemoText = style({
   fontSize: tokens.fontSize.sm,
@@ -157,6 +158,22 @@ export const earnVaultDemoStateState = style({
 
   color: inherited.color.textColorPrimary,
   selectors: {
+    // TDS NativeSelect spacing: the 16x16 chevron sits 12px from the inline
+    // end, matching the text inset, and the text keeps 8px clear of it.
+    '&:is(select)': {
+      appearance: 'none',
+      paddingInlineEnd: tokens.spacing['9'],
+      backgroundImage: selectChevron.light,
+      backgroundRepeat: 'no-repeat',
+      backgroundPosition: 'right 12px center',
+      backgroundSize: '16px 16px',
+    },
+    ':root[data-vocs-theme="dark"] &:is(select)': {
+      backgroundImage: selectChevron.dark,
+    },
+    ':dir(rtl) &:is(select)': {
+      backgroundPosition: 'left 12px center',
+    },
     '&:focus-visible': {
       '--tempo-style-ring-shadow':
         'var(--tempo-style-ring-inset,) 0 0 0 calc(2px + var(--tempo-style-ring-offset-width)) var(--tempo-style-ring-color, currentcolor)',
diff --git a/src/styles/select-chevron.ts b/src/styles/select-chevron.ts
new file mode 100644
index 000000000..2cb940ebc
--- /dev/null
+++ b/src/styles/select-chevron.ts
@@ -0,0 +1,8 @@
+// TDS ChevronDown (16x16) in content primary, drawn as a native select's
+// background so selects keep their markup. Pair with `appearance: none` and an
+// inline-end padding that clears the chevron.
+export const selectChevron = {
+  light:
+    "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23000' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
+  dark: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M11.9804 6.1464C12.1757 5.9514 12.4923 5.95122 12.6875 6.1464C12.8823 6.3416 12.8823 6.65827 12.6875 6.85343L8.82516 10.7157C8.36974 11.1709 7.63132 11.1707 7.17574 10.7157L3.31344 6.85343C3.11818 6.65816 3.11818 6.34166 3.31344 6.1464C3.50871 5.95124 3.82524 5.95117 4.02047 6.1464L7.88277 10.0087C7.94782 10.0731 8.05324 10.0734 8.11813 10.0087L11.9804 6.1464Z'/%3E%3C/svg%3E\")",
+} as const