.github/workflows/aat-reports.yml

@@ -39,7 +39,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run AAT
-        uses: docker://mcr.microsoft.com/playwright:v1.50.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:
@@ -114,7 +114,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run AAT
-        uses: docker://mcr.microsoft.com/playwright:v1.50.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.github/workflows/vrt-reports.yml

@@ -39,7 +39,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run VRT
-        uses: docker://mcr.microsoft.com/playwright:v1.50.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:
@@ -114,7 +114,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run VRT
-        uses: docker://mcr.microsoft.com/playwright:v1.50.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.github/workflows/vrt.yml

@@ -52,7 +52,7 @@ jobs:
           echo "pid=$pid" >> $GITHUB_OUTPUT
           sleep 5
       - name: Run VRT
-        uses: docker://mcr.microsoft.com/playwright:v1.50.0-jammy
+        uses: docker://mcr.microsoft.com/playwright:v1.51.0-jammy
         env:
           STORYBOOK_URL: 'http://172.17.0.1:6006'
         with:

.gitignore

@@ -40,3 +40,6 @@ blob-report
 
 # ESLint
 .eslintcache
+
+# CSS modules type definitions
+*.module.css.d.ts

e2e/components/Dialogv1.test.ts

@@ -8,7 +8,7 @@ test.describe('Dialog v1', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'components-dialogv1--default',
+            id: 'deprecated-components-dialogv1--default',
             globals: {
               colorScheme: theme,
             },

e2e/components/NavList.test.ts

@@ -92,4 +92,60 @@ test.describe('NavList', () => {
       })
     }
   })
+
+  test.describe('With expand', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With expand.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
+
+  test.describe('With group expand', () => {
+    for (const theme of themes) {
+      test.describe(theme, () => {
+        test('default @vrt', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+
+          // Default state
+          expect(await page.screenshot()).toMatchSnapshot(`NavList.With group expand.${theme}.png`)
+        })
+
+        test('axe @aat', async ({page}) => {
+          await visit(page, {
+            id: 'components-navlist--with-group-expand',
+            globals: {
+              colorScheme: theme,
+            },
+          })
+          await expect(page).toHaveNoViolations()
+        })
+      })
+    }
+  })
 })

examples/codesandbox/package.json

@@ -20,10 +20,10 @@
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.3.1",
     "@vitejs/plugin-react": "^4.3.3",
-    "@primer/react": "37.14.0",
+    "@primer/react": "37.15.0",
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.18",
+    "eslint-plugin-react-refresh": "^0.4.19",
     "styled-components": "5.x",
     "typescript": "^5.7.2",
     "vite": "^5.4.12"

examples/nextjs/package.json

@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "37.14.0",
+    "@primer/react": "37.15.0",
     "next": "^15.1.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

examples/theming/package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^19.14.0",
-    "@primer/react": "37.14.0",
+    "@primer/react": "37.15.0",
     "clsx": "^1.2.1",
     "next": "^14.2.15",
     "react": "^18.3.1",

examples/theming/src/app/components/PageHeader/PageHeader.module.css

@@ -1,12 +1,12 @@
-.header {
+.Header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   min-height: 4rem;
   padding: var(--base-size-16);
 }
 
-.logo {
+.Logo {
   color: inherit;
   text-decoration: none;
 }

examples/theming/src/app/components/PageHeader/PageHeader.tsx

@@ -4,8 +4,8 @@ import classes from './PageHeader.module.css'
 
 export function PageHeader() {
   return (
-    <header className={classes.header}>
-      <Link href="/" className={classes.logo}>
+    <header className={classes.Header}>
+      <Link href="/" className={classes.Logo}>
         Primer
       </Link>
       <ThemePreference />

examples/theming/src/app/components/ThemePreference/ThemePreference.module.css

@@ -1,9 +1,9 @@
 /* stylelint-disable selector-no-qualifying-type */
-html[data-color-mode='dark'] .light {
+html[data-color-mode='dark'] .Light {
   display: none !important;
 }
 
-html[data-color-mode='light'] .dark,
-html[data-color-mode='auto'] .dark {
+html[data-color-mode='light'] .Dark,
+html[data-color-mode='auto'] .Dark {
   display: none !important;
 }

examples/theming/src/app/components/ThemePreference/ThemePreference.tsx

@@ -2,7 +2,6 @@
 
 import {SunIcon, MoonIcon} from '@primer/octicons-react'
 import {Button, useTheme} from '@primer/react'
-import {clsx} from 'clsx'
 import classes from './ThemePreference.module.css'
 
 export function ThemePreference() {
@@ -30,8 +29,8 @@ export function ThemePreference() {
         })
       }}
     >
-      <SunIcon className={clsx(classes.icon, classes.light)} />
-      <MoonIcon className={clsx(classes.icon, classes.dark)} />
+      <SunIcon className={classes.Light} />
+      <MoonIcon className={classes.Dark} />
     </Button>
   )
 }