@furystack/shades-common-components 12.7.0 → 13.0.0

package/esm/themes/wild-hunt-theme.js

@@ -0,0 +1,122 @@
+import { wildHuntPalette } from './wild-hunt-palette.js';
+const paperImageValue = `url("data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="t" x="0" y="0" width="100%" height="100%"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" stitchTiles="stitch" result="n"/><feDiffuseLighting in="n" lighting-color="#606878" surfaceScale="3"><feDistantLight azimuth="200" elevation="40"/></feDiffuseLighting></filter><rect width="200" height="200" filter="url(#t)" opacity="0.1"/></svg>`)}")`;
+/**
+ * Theme inspired by The Witcher 3: Wild Hunt.
+ * Dark, stormy backgrounds with silver-steel accents and crimson highlights,
+ * evoking the atmosphere of the Continent, the witcher medallion, and the Wild Hunt's spectral aura.
+ *
+ * @remarks Recommended Google Font: Cinzel
+ */
+export const wildHuntTheme = {
+    name: 'wild-hunt-theme',
+    text: {
+        primary: '#d4d8de',
+        secondary: 'rgba(212, 216, 222, 0.65)',
+        disabled: 'rgba(212, 216, 222, 0.35)',
+    },
+    button: {
+        active: '#d4d8de',
+        hover: 'rgba(168, 176, 188, 0.1)',
+        selected: 'rgba(168, 176, 188, 0.16)',
+        disabled: 'rgba(212, 216, 222, 0.3)',
+        disabledBackground: 'rgba(212, 216, 222, 0.06)',
+    },
+    background: {
+        default: '#12151a',
+        paper: '#1c2028',
+        paperImage: paperImageValue,
+    },
+    palette: wildHuntPalette,
+    divider: 'rgba(168, 176, 188, 0.18)',
+    action: {
+        hoverBackground: 'rgba(168, 32, 32, 0.06)',
+        selectedBackground: 'rgba(168, 32, 32, 0.14)',
+        activeBackground: 'rgba(168, 32, 32, 0.22)',
+        focusRing: '0 0 0 3px rgba(168, 176, 188, 0.3)',
+        disabledOpacity: '0.5',
+        backdrop: 'rgba(6, 8, 12, 0.85)',
+        subtleBorder: 'rgba(168, 176, 188, 0.2)',
+    },
+    shape: {
+        borderRadius: {
+            xs: '0px',
+            sm: '0px',
+            md: '0px',
+            lg: '0px',
+            full: '50%',
+        },
+        borderWidth: '2px',
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3)',
+        md: '0 4px 12px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3)',
+        lg: '0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.35)',
+        xl: '0 12px 32px rgba(0, 0, 0, 0.6), 0 6px 12px rgba(0, 0, 0, 0.4)',
+    },
+    typography: {
+        fontFamily: "Cinzel, 'Palatino Linotype', Palatino, 'Book Antiqua', serif",
+        fontSize: {
+            xs: '11px',
+            sm: '13px',
+            md: '15px',
+            lg: '17px',
+            xl: '24px',
+            xxl: '30px',
+            xxxl: '36px',
+            xxxxl: '48px',
+        },
+        fontWeight: {
+            normal: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.3',
+            normal: '1.5',
+            relaxed: '1.75',
+        },
+        letterSpacing: {
+            tight: '-0.25px',
+            dense: '0px',
+            normal: '0.25px',
+            wide: '0.5px',
+            wider: '1px',
+            widest: '1.5px',
+        },
+    },
+    transitions: {
+        duration: {
+            fast: '0.15s',
+            normal: '0.25s',
+            slow: '0.35s',
+        },
+        easing: {
+            default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            easeOut: 'cubic-bezier(0.23, 1.0, 0.32, 1.0)',
+            easeInOut: 'ease-in-out',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    zIndex: {
+        drawer: '1000',
+        appBar: '1100',
+        modal: '1200',
+        tooltip: '1300',
+        dropdown: '1400',
+    },
+    effects: {
+        blurSm: '2px',
+        blurMd: '4px',
+        blurLg: '8px',
+        blurXl: '12px',
+    },
+};
+//# sourceMappingURL=wild-hunt-theme.js.map

package/esm/themes/wild-hunt-theme.js.map

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

package/esm/themes/xenomorph-palette.d.ts

@@ -0,0 +1,8 @@
+import type { Palette } from '../services/theme-provider-service.js';
+/**
+ * Color palette inspired by the Alien franchise.
+ * Acid green primary, cold industrial steel-blue secondary,
+ * with harsh, clinical tones for semantic colors.
+ */
+export declare const xenomorphPalette: Palette;
+//# sourceMappingURL=xenomorph-palette.d.ts.map

package/esm/themes/xenomorph-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xenomorph-palette.d.ts","sourceRoot":"","sources":["../../src/themes/xenomorph-palette.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uCAAuC,CAAA;AAEpE;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,EAAE,OAiD9B,CAAA"}

package/esm/themes/xenomorph-palette.js

@@ -0,0 +1,56 @@
+/**
+ * Color palette inspired by the Alien franchise.
+ * Acid green primary, cold industrial steel-blue secondary,
+ * with harsh, clinical tones for semantic colors.
+ */
+export const xenomorphPalette = {
+    primary: {
+        light: '#a0e070',
+        lightContrast: '#000000',
+        main: '#7ec850',
+        mainContrast: '#000000',
+        dark: '#5a9830',
+        darkContrast: '#000000',
+    },
+    secondary: {
+        light: '#8898b0',
+        lightContrast: '#000000',
+        main: '#607890',
+        mainContrast: '#ffffff',
+        dark: '#425868',
+        darkContrast: '#ffffff',
+    },
+    error: {
+        light: '#e05858',
+        lightContrast: '#000000',
+        main: '#c43030',
+        mainContrast: '#ffffff',
+        dark: '#901c1c',
+        darkContrast: '#ffffff',
+    },
+    warning: {
+        light: '#d0a040',
+        lightContrast: '#000000',
+        main: '#b08020',
+        mainContrast: '#000000',
+        dark: '#886010',
+        darkContrast: '#ffffff',
+    },
+    success: {
+        light: '#68b868',
+        lightContrast: '#000000',
+        main: '#489848',
+        mainContrast: '#000000',
+        dark: '#2e7830',
+        darkContrast: '#ffffff',
+    },
+    info: {
+        light: '#6890b8',
+        lightContrast: '#000000',
+        main: '#487098',
+        mainContrast: '#ffffff',
+        dark: '#2e5078',
+        darkContrast: '#ffffff',
+    },
+};
+//# sourceMappingURL=xenomorph-palette.js.map

package/esm/themes/xenomorph-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xenomorph-palette.js","sourceRoot":"","sources":["../../src/themes/xenomorph-palette.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAY;IACvC,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,KAAK,EAAE;QACL,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,OAAO,EAAE;QACP,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,SAAS;QAChB,aAAa,EAAE,SAAS;QACxB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;QACvB,IAAI,EAAE,SAAS;QACf,YAAY,EAAE,SAAS;KACxB;CACF,CAAA"}

package/esm/themes/xenomorph-theme.d.ts

@@ -0,0 +1,120 @@
+/**
+ * Dark industrial theme inspired by the Alien franchise.
+ * Cold metallic backgrounds, acid green accents with toxic glow,
+ * and a condensed monospace typeface evoking shipboard terminals.
+ *
+ * @remarks Recommended Google Font: IBM Plex Mono
+ */
+export declare const xenomorphTheme: {
+    name: string;
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    button: {
+        active: string;
+        hover: string;
+        selected: string;
+        disabled: string;
+        disabledBackground: string;
+    };
+    background: {
+        default: string;
+        paper: string;
+        paperImage: string;
+    };
+    palette: import("../services/theme-provider-service.js").Palette;
+    divider: string;
+    action: {
+        hoverBackground: string;
+        selectedBackground: string;
+        activeBackground: string;
+        focusRing: string;
+        disabledOpacity: string;
+        backdrop: string;
+        subtleBorder: string;
+    };
+    shape: {
+        borderRadius: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            full: string;
+        };
+        borderWidth: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        fontFamily: string;
+        fontSize: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+            xxl: string;
+            xxxl: string;
+            xxxxl: string;
+        };
+        fontWeight: {
+            normal: string;
+            medium: string;
+            semibold: string;
+            bold: string;
+        };
+        lineHeight: {
+            tight: string;
+            normal: string;
+            relaxed: string;
+        };
+        letterSpacing: {
+            tight: string;
+            dense: string;
+            normal: string;
+            wide: string;
+            wider: string;
+            widest: string;
+        };
+    };
+    transitions: {
+        duration: {
+            fast: string;
+            normal: string;
+            slow: string;
+        };
+        easing: {
+            default: string;
+            easeOut: string;
+            easeInOut: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    zIndex: {
+        drawer: string;
+        appBar: string;
+        modal: string;
+        tooltip: string;
+        dropdown: string;
+    };
+    effects: {
+        blurSm: string;
+        blurMd: string;
+        blurLg: string;
+        blurXl: string;
+    };
+};
+//# sourceMappingURL=xenomorph-theme.d.ts.map

package/esm/themes/xenomorph-theme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"xenomorph-theme.d.ts","sourceRoot":"","sources":["../../src/themes/xenomorph-theme.ts"],"names":[],"mappings":"AAGA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+GV,CAAA"}

package/esm/themes/xenomorph-theme.js

@@ -0,0 +1,121 @@
+import { xenomorphPalette } from './xenomorph-palette.js';
+/**
+ * Dark industrial theme inspired by the Alien franchise.
+ * Cold metallic backgrounds, acid green accents with toxic glow,
+ * and a condensed monospace typeface evoking shipboard terminals.
+ *
+ * @remarks Recommended Google Font: IBM Plex Mono
+ */
+export const xenomorphTheme = {
+    name: 'xenomorph-theme',
+    text: {
+        primary: '#c8ccd0',
+        secondary: 'rgba(200, 204, 208, 0.65)',
+        disabled: 'rgba(200, 204, 208, 0.35)',
+    },
+    button: {
+        active: '#7ec850',
+        hover: 'rgba(126, 200, 80, 0.1)',
+        selected: 'rgba(126, 200, 80, 0.18)',
+        disabled: 'rgba(200, 204, 208, 0.3)',
+        disabledBackground: 'rgba(200, 204, 208, 0.06)',
+    },
+    background: {
+        default: '#101214',
+        paper: '#1a1c20',
+        paperImage: '',
+    },
+    palette: xenomorphPalette,
+    divider: 'rgba(126, 200, 80, 0.15)',
+    action: {
+        hoverBackground: 'rgba(126, 200, 80, 0.07)',
+        selectedBackground: 'rgba(126, 200, 80, 0.13)',
+        activeBackground: 'rgba(126, 200, 80, 0.2)',
+        focusRing: '0 0 0 2px rgba(126, 200, 80, 0.45)',
+        disabledOpacity: '0.4',
+        backdrop: 'rgba(6, 8, 10, 0.9)',
+        subtleBorder: 'rgba(126, 200, 80, 0.18)',
+    },
+    shape: {
+        borderRadius: {
+            xs: '1px',
+            sm: '2px',
+            md: '3px',
+            lg: '4px',
+            full: '50%',
+        },
+        borderWidth: '1px',
+    },
+    shadows: {
+        none: 'none',
+        sm: '0 1px 4px rgba(0, 0, 0, 0.5), 0 0 4px rgba(126, 200, 80, 0.06)',
+        md: '0 4px 12px rgba(0, 0, 0, 0.6), 0 0 10px rgba(126, 200, 80, 0.08)',
+        lg: '0 8px 24px rgba(0, 0, 0, 0.7), 0 0 18px rgba(126, 200, 80, 0.1)',
+        xl: '0 12px 36px rgba(0, 0, 0, 0.8), 0 0 28px rgba(126, 200, 80, 0.12)',
+    },
+    typography: {
+        fontFamily: "'IBM Plex Mono', 'Fira Code', 'Consolas', monospace",
+        fontSize: {
+            xs: '10px',
+            sm: '12px',
+            md: '13px',
+            lg: '15px',
+            xl: '20px',
+            xxl: '26px',
+            xxxl: '32px',
+            xxxxl: '42px',
+        },
+        fontWeight: {
+            normal: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
+        lineHeight: {
+            tight: '1.3',
+            normal: '1.5',
+            relaxed: '1.7',
+        },
+        letterSpacing: {
+            tight: '-0.25px',
+            dense: '0px',
+            normal: '0.25px',
+            wide: '0.75px',
+            wider: '1.25px',
+            widest: '2px',
+        },
+    },
+    transitions: {
+        duration: {
+            fast: '0.1s',
+            normal: '0.2s',
+            slow: '0.35s',
+        },
+        easing: {
+            default: 'cubic-bezier(0.4, 0, 0.2, 1)',
+            easeOut: 'cubic-bezier(0.16, 1.0, 0.3, 1.0)',
+            easeInOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+        },
+    },
+    spacing: {
+        xs: '4px',
+        sm: '8px',
+        md: '16px',
+        lg: '24px',
+        xl: '32px',
+    },
+    zIndex: {
+        drawer: '1000',
+        appBar: '1100',
+        modal: '1200',
+        tooltip: '1300',
+        dropdown: '1400',
+    },
+    effects: {
+        blurSm: '4px',
+        blurMd: '8px',
+        blurLg: '16px',
+        blurXl: '24px',
+    },
+};
+//# sourceMappingURL=xenomorph-theme.js.map

package/esm/themes/xenomorph-theme.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-common-components",
-  "version": "12.7.0",
+  "version": "13.0.0",
   "description": "Common UI components for FuryStack Shades",
   "type": "module",
   "scripts": {
@@ -10,6 +10,10 @@
     ".": {
       "types": "./esm/index.d.ts",
       "import": "./esm/index.js"
+    },
+    "./themes/*": {
+      "types": "./esm/themes/*-theme.d.ts",
+      "import": "./esm/themes/*-theme.js"
     }
   },
   "files": [
@@ -45,9 +49,9 @@
   },
   "dependencies": {
     "@furystack/cache": "^6.0.0",
-    "@furystack/core": "^15.2.0",
+    "@furystack/core": "^15.2.1",
     "@furystack/inject": "^12.0.30",
-    "@furystack/shades": "^12.2.2",
+    "@furystack/shades": "^12.2.3",
     "@furystack/utils": "^8.1.10",
     "path-to-regexp": "^8.3.0"
   },

package/src/components/accordion/accordion-item.tsx

@@ -26,7 +26,7 @@ export type AccordionItemProps = {
  * @example
  * ```tsx
  * <AccordionItem title="Section 1" defaultExpanded>
- *   <p>Content goes here</p>
+ *   <Typography variant="body1">Content goes here</Typography>
  * </AccordionItem>
  * ```
  */
@@ -157,30 +157,23 @@ export const AccordionItem = Shade<AccordionItemProps>({
       }
     }
 
-    const headerEl = (
-      <div
-        className="accordion-header"
-        role="button"
-        tabIndex={props.disabled ? -1 : 0}
-        onclick={handleToggle}
-        onkeydown={handleKeyDown}
-      >
-        {props.icon ? <span className="accordion-icon">{props.icon}</span> : null}
-        <span className="accordion-title">{props.title}</span>
-        <span className="accordion-chevron">
-          <Icon icon={chevronDown} size={16} />
-        </span>
-      </div>
-    ) as unknown as HTMLDivElement
-
-    headerEl.setAttribute('aria-expanded', String(isExpanded))
-    if (props.disabled) {
-      headerEl.setAttribute('data-disabled', '')
-    }
-
     return (
       <>
-        {headerEl}
+        <div
+          className="accordion-header"
+          role="button"
+          tabIndex={props.disabled ? -1 : 0}
+          onclick={handleToggle}
+          onkeydown={handleKeyDown}
+          aria-expanded={String(isExpanded)}
+          data-disabled={props.disabled ? '' : undefined}
+        >
+          {props.icon ? <span className="accordion-icon">{props.icon}</span> : null}
+          <span className="accordion-title">{props.title}</span>
+          <span className="accordion-chevron">
+            <Icon icon={chevronDown} size={16} />
+          </span>
+        </div>
         <div
           ref={contentRef}
           className="accordion-content"

package/src/components/accordion/accordion.tsx

@@ -27,6 +27,7 @@ export const Accordion = Shade<AccordionProps>({
   shadowDomName: 'shade-accordion',
   css: {
     display: 'flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     flexDirection: 'column',
     borderRadius: cssVariableTheme.shape.borderRadius.md,
     overflow: 'hidden',

package/src/components/app-bar-link.tsx

@@ -12,6 +12,7 @@ export const AppBarLink = Shade<AppBarLinkProps>({
     height: '100%',
     textDecoration: 'none',
     alignItems: 'center',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     padding: `0 ${cssVariableTheme.spacing.sm}`,
     transition: `color ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}, transform ${cssVariableTheme.transitions.duration.normal} ${cssVariableTheme.transitions.easing.easeInOut}`,
     cursor: 'pointer',

package/src/components/app-bar.spec.tsx

@@ -150,9 +150,9 @@ describe('AppBar component', () => {
     })
 
     it('should have semi-transparent background', async () => {
-      await usingAsync(await renderAppBar(<span>Content</span>), async ({ appBar }) => {
-        const computedStyle = window.getComputedStyle(appBar)
-        expect(computedStyle.background).toContain('color-mix')
+      await usingAsync(await renderAppBar(<span>Content</span>), async () => {
+        const styleEl = document.querySelector('style[data-shades-styles]')
+        expect(styleEl?.textContent).toContain('color-mix')
       })
     })
   })

package/src/components/app-bar.tsx

@@ -6,6 +6,7 @@ export const AppBar = Shade({
   css: {
     width: '100%',
     background: `color-mix(in srgb, ${cssVariableTheme.background.paper} 85%, transparent)`,
+    backgroundImage: cssVariableTheme.background.paperImage,
     backdropFilter: `blur(${cssVariableTheme.effects.blurLg})`,
     display: 'flex',
     justifyContent: 'flex-start',
@@ -15,6 +16,7 @@ export const AppBar = Shade({
     opacity: '0',
     position: 'fixed',
     zIndex: '1',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     color: cssVariableTheme.text.primary,
     '&[data-visible]': {
       opacity: '1',

package/src/components/avatar.tsx

@@ -9,6 +9,7 @@ export type AvatarProps = { avatarUrl: string; fallback?: JSX.Element } & Partia
 export const Avatar = Shade<AvatarProps>({
   shadowDomName: 'shade-avatar',
   css: {
+    fontFamily: cssVariableTheme.typography.fontFamily,
     width: '128px',
     height: '128px',
     overflow: 'hidden',

package/src/components/badge.tsx

@@ -28,6 +28,7 @@ export const Badge = Shade<BadgeProps>({
   shadowDomName: 'shade-badge',
   css: {
     display: 'inline-flex',
+    fontFamily: cssVariableTheme.typography.fontFamily,
     position: 'relative',
     verticalAlign: 'middle',
     flexShrink: '0',
@@ -48,7 +49,7 @@ export const Badge = Shade<BadgeProps>({
       minWidth: '20px',
       height: '20px',
       padding: `0 ${cssVariableTheme.spacing.xs}`,
-      borderRadius: cssVariableTheme.shape.borderRadius.lg,
+      borderRadius: cssVariableTheme.shape.borderRadius.full,
       background: 'var(--badge-color-main)',
       color: 'var(--badge-color-contrast)',
       boxSizing: 'border-box',

package/src/components/breadcrumb.tsx

@@ -74,6 +74,7 @@ export const Breadcrumb = Shade<BreadcrumbProps>({
     alignItems: 'center',
     gap: cssVariableTheme.spacing.sm,
     padding: `${cssVariableTheme.spacing.sm} 0`,
+    fontFamily: cssVariableTheme.typography.fontFamily,
     fontSize: '0.9em',
     color: cssVariableTheme.text.secondary,
 

package/src/components/button-group.spec.tsx

@@ -729,7 +729,7 @@ describe('ToggleButtonGroup edge cases', () => {
     )
   })
 
-  it('should apply vertical orientation border radius', async () => {
+  it('should apply vertical orientation border radius via CSS', async () => {
     await usingAsync(
       await renderToggleGroup({ orientation: 'vertical' }, [
         <ToggleButton value="a">A</ToggleButton>,
@@ -737,12 +737,13 @@ describe('ToggleButtonGroup edge cases', () => {
       ] as unknown as JSX.Element[]),
       async ({ group }) => {
         await flushUpdates()
-        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+        // Border-radius is now applied via CSS rules targeting
+        // button:first-of-type / button:last-of-type within the group.
+        // Verify the host has the correct orientation data attribute
+        // that the CSS selectors depend on.
+        expect(group.getAttribute('data-orientation')).toBe('vertical')
         const buttons = group.querySelectorAll('button[data-value]')
-        // First button should have top radius
-        expect((buttons[0] as HTMLElement).style.borderRadius).toContain('0 0')
-        // Last button should have bottom radius
-        expect((buttons[1] as HTMLElement).style.borderRadius).toContain('0 0')
+        expect(buttons.length).toBe(2)
       },
     )
   })