feat(v3-uplift): market-switcher favourite a11y + full-width showcase banners

- MarketSwitcher favourite star: on keyboard focus reveal it and ring it with the same
  focus outline the buttons use; show the row highlight on hover AND focus; bump the empty
  star fill a step stronger (fg-4 to fg-3) on hover/focus.
- Tokenise the favourite gold as favourite-star (Display-P3 + sRGB via the palette),
  replacing the hand-written hex in StarIcon.
- /dev/components banners: opt the section out of the max-width container (fullBleed) and
  wrap each banner to fill the stage, so banners show at full page width.

Author: abjt14

src/components/MarketSwitcher.tsx

@@ -342,15 +342,39 @@ export const MarketSwitcher = ({ hideTitleChrome = false, titlePrefix }: MarketS
           }),
           ...(isSelected
             ? {}
-            : { '&:hover::before': insetHighlightActive(figVars['button-hover']) }),
-          // Star: always visible on mobile, hover-reveal on desktop
+            : {
+                // Row highlight on hover AND on keyboard focus — of the row itself or its star
+                // button (`:focus-within`) — so tabbing through always shows where you are.
+                '&:hover::before, &:focus-within::before': insetHighlightActive(
+                  figVars['button-hover']
+                ),
+              }),
+          // Star: always visible on mobile, hover-reveal on desktop; also reveal it whenever the
+          // row or the star button is focused, so keyboard users can see the favourite toggle.
           '& .grid-fav-btn': {
             opacity: isMobile || isFavorite ? 1 : 0,
             transition: 'opacity 0.15s',
           },
-          '&:hover .grid-fav-btn': {
+          '&:hover .grid-fav-btn, &:focus-within .grid-fav-btn': {
             opacity: 1,
           },
+          // Keyboard focus lands on the star itself: ring it with an outline so it reads as focused
+          // (global ripple is disabled — add our own affordance).
+          '& .grid-fav-btn:focus-visible': {
+            opacity: 1,
+            // Same focus ring the buttons use (MuiButton root in theme.tsx).
+            outline: `2px solid ${figVars['fg-1']}`,
+            outlineOffset: '2px',
+          },
+          // The empty (non-favourited) star fills a step stronger (fg-4 → fg-3) on hover / focus.
+          ...(isFavorite
+            ? {}
+            : {
+                '&:hover .grid-fav-btn .MuiSvgIcon-root, & .grid-fav-btn:focus-visible .MuiSvgIcon-root':
+                  {
+                    color: figVars['fg-3'],
+                  },
+              }),
         }}
       >
         {renderRowLogo(logo)}

src/components/icons/StarIcon.tsx

@@ -1,7 +1,9 @@
 import { SvgIcon, SvgIconProps } from '@mui/material';
 
-// Gold used for the favourited state of the star toggle.
-export const FAVOURITE_STAR_COLOR = '#FFB300';
+// Theme token key for the favourited star's gold — resolves to Display-P3 + sRGB via the palette
+// (Figma: color(display-p3 1 0.7 0)). Consumers pass it as an sx `color`; the star fills it
+// through `currentColor`.
+export const FAVOURITE_STAR_COLOR = 'favourite-star';
 
 // Filled star for the "favourite" toggle. Fills with `currentColor` so the consumer
 // controls the color (e.g. gold when favourited, muted when not).

src/modules/dev/ComponentShowcase/components/BannersSection/index.tsx

@@ -1,3 +1,4 @@
+import { Box } from '@mui/material';
 import AnalyticsBanner from 'src/components/Analytics/AnalyticsConsent';
 import TopBarNotify from 'src/layouts/TopBarNotify';
 import { SavingsGhoBanner } from 'src/modules/markets/Gho/GhoBanner';
@@ -25,23 +26,34 @@ const PREVIEW_CAMPAIGNS = {
  * Live gallery of the app's page-level banners. The two normally state-gated banners
  * (`TopBarNotify`, `AnalyticsBanner`) are rendered in `preview` mode so they always show and don't
  * read/mutate real dismissal or consent state; `SavingsGhoBanner` renders live off app context.
+ *
+ * The Specimen stage is a flex row (children size to content), so each banner is wrapped in a
+ * full-width box to make it span the stage the way it does its real page.
  */
 export const BannersSection = () => (
   <Section
     title="Banners"
     description="Page-level promotional, announcement, and consent banners from across the app."
   >
     <Specimen label="sGHO markets banner — SavingsGhoBanner (default)" fullWidth>
-      <SavingsGhoBanner hasLegacyPositionOverride={false} />
+      <Box sx={{ width: '100%' }}>
+        <SavingsGhoBanner hasLegacyPositionOverride={false} />
+      </Box>
     </Specimen>
     <Specimen label="sGHO markets banner — SavingsGhoBanner (legacy stkGHO holder)" fullWidth>
-      <SavingsGhoBanner hasLegacyPositionOverride />
+      <Box sx={{ width: '100%' }}>
+        <SavingsGhoBanner hasLegacyPositionOverride />
+      </Box>
     </Specimen>
     <Specimen label="V4 top-bar announcement — TopBarNotify" fullWidth>
-      <TopBarNotify preview campaigns={PREVIEW_CAMPAIGNS} />
+      <Box sx={{ width: '100%' }}>
+        <TopBarNotify preview campaigns={PREVIEW_CAMPAIGNS} />
+      </Box>
     </Specimen>
     <Specimen label="Analytics consent — AnalyticsBanner" fullWidth>
-      <AnalyticsBanner preview />
+      <Box sx={{ width: '100%' }}>
+        <AnalyticsBanner preview />
+      </Box>
     </Specimen>
   </Section>
 );

src/modules/dev/ComponentShowcase/components/ShowcaseLayout/index.tsx

@@ -12,7 +12,7 @@ import { useColorScheme } from '@mui/material/styles';
 import { ReactNode, useState } from 'react';
 import { Link } from 'src/components/primitives/Link';
 
-import { SHOWCASE_GROUPS } from '../../utils/registry';
+import { SHOWCASE_GROUPS, SHOWCASE_SECTIONS } from '../../utils/registry';
 import { ThemeControl } from '../ThemeControl';
 
 interface ShowcaseLayoutProps {
@@ -34,6 +34,9 @@ export const ShowcaseLayout = ({ activeSlug, children }: ShowcaseLayoutProps) =>
   );
   const [mobileNavOpen, setMobileNavOpen] = useState(false);
 
+  // Some sections (page-wide banners) opt out of the max-width content container.
+  const fullBleed = SHOWCASE_SECTIONS.find((s) => s.slug === activeSlug)?.fullBleed ?? false;
+
   // One nav block, reused by the desktop sidebar and the mobile drawer.
   const nav = (
     <>
@@ -174,7 +177,7 @@ export const ShowcaseLayout = ({ activeSlug, children }: ShowcaseLayoutProps) =>
           <ThemeControl mode={scheme} onChange={setScheme} />
         </Box>
 
-        <Container maxWidth="lg" sx={{ py: { xs: 6, md: 10 } }}>
+        <Container maxWidth={fullBleed ? false : 'lg'} sx={{ py: { xs: 6, md: 10 } }}>
           {children}
         </Container>
       </Box>

src/modules/dev/ComponentShowcase/utils/registry.tsx

@@ -6,6 +6,8 @@ export interface ShowcaseSection {
   label: string;
   group: string;
   Component: ComponentType;
+  /** Opt out of the layout's max-width content container (e.g. full-width page banners). */
+  fullBleed?: boolean;
 }
 
 // One entry per route (`/dev/components/<slug>`). Each section is lazily loaded so a
@@ -83,6 +85,7 @@ export const SHOWCASE_SECTIONS: ShowcaseSection[] = [
     slug: 'banners',
     label: 'Banners',
     group: 'Data & surfaces',
+    fullBleed: true,
     Component: dynamic(() => import('../components/BannersSection').then((m) => m.BannersSection)),
   },
 ];

src/utils/figmaColors.ts

@@ -67,6 +67,8 @@ export const figmaLight = {
   'data-pink': '#e1a4d9',
   'button-hover': 'rgba(0, 0, 0, 0.025)',
   'data-green-gho': '#5dff93',
+  // Gold for the favourited market star (mode-agnostic; Figma color(display-p3 1 0.7 0)).
+  'favourite-star': '#FFB300',
   // sGHO markets-banner gradient tints — data-green / neutral washes at 6%.
   'sgho-banner-green': 'rgba(50, 201, 88, 0.06)',
   'sgho-banner-fade': 'rgba(255, 255, 255, 0.06)',
@@ -183,6 +185,8 @@ export const figmaDark = {
   'table-item-hover-1': '#1e1d1d',
   'table-item-hover-2': '#282727',
   'data-green-gho': '#5dff93',
+  // Gold for the favourited market star (mode-agnostic; Figma color(display-p3 1 0.7 0)).
+  'favourite-star': '#FFB300',
   // sGHO markets-banner gradient tints — dark data-green / neutral washes at 6%.
   'sgho-banner-green': 'rgba(102, 195, 153, 0.06)',
   'sgho-banner-fade': 'rgba(255, 255, 255, 0.06)',