From 2f1bbdf88f71cb851d87dbfb30dd4b87ee7d8828 Mon Sep 17 00:00:00 2001 From: Alex Carpenter Date: Tue, 27 Oct 2026 14:25:43 -0400 Subject: [PATCH] fix(mosaic): strip native button styling from switcher rows --- .changeset/mosaic-switcher-row-button-reset.md | 5 +++++ .../mosaic/src/features/switcher/switcher-item.styles.ts | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 .changeset/mosaic-switcher-row-button-reset.md diff --git a/.changeset/mosaic-switcher-row-button-reset.md b/.changeset/mosaic-switcher-row-button-reset.md new file mode 100644 index 00000000000..30c74ce88f3 --- /dev/null +++ b/.changeset/mosaic-switcher-row-button-reset.md @@ -0,0 +1,5 @@ +--- +'@clerk/mosaic': patch +--- + +Fix menu rows in `` and `` showing the browser's default button border and background on pages without a CSS reset. diff --git a/packages/mosaic/src/features/switcher/switcher-item.styles.ts b/packages/mosaic/src/features/switcher/switcher-item.styles.ts index 519519dcc5b..214181015e3 100644 --- a/packages/mosaic/src/features/switcher/switcher-item.styles.ts +++ b/packages/mosaic/src/features/switcher/switcher-item.styles.ts @@ -38,8 +38,10 @@ export const styles = stylex.create({ ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-foreground'], }, }, + borderStyle: 'none', + appearance: 'none', backgroundColor: { - default: null, + default: 'transparent', ':active:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-neutral-alpha-200'], '@media (hover: hover)': { ':hover:not(:disabled, [aria-disabled="true"])': colorVars['--cl-color-neutral-alpha-100'],