Update dependencies, yarn, corepack, node, etc

.github/workflows/build-and-deploy.yml

@@ -16,11 +16,12 @@ jobs:
         uses: actions/checkout@v6
       - uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 26
 
       - name: Install and Build 🔧 # This example project is built using npm and outputs the result to the 'build' folder. Replace with the commands required to build your project, or remove this step entirely if your site is pre-built.
         run: |
-          yarn
+          corepack enable
+          yarn install --immutable --immutable-cache
           yarn build-storybook
 
       - name: Disable Jekyll # Tell GitHub Pages to not use Jekyll

.github/workflows/chromatic.yml

@@ -13,10 +13,12 @@ jobs:
       - name: Install compatible node version
         uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 26
 
       - name: Install dependencies
-        run: yarn
+        run: |
+          corepack enable
+          yarn install --immutable --immutable-cache
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.github/workflows/pr-preview.yml

@@ -18,11 +18,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 26
 
       - name: Install dependencies
         if: github.event.action != 'closed'
-        run: yarn install --immutable
+        run: |
+          corepack enable
+          yarn install --immutable --immutable-cache
 
       - name: Build Storybook
         if: github.event.action != 'closed'

.github/workflows/publish.yml

@@ -19,11 +19,13 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 26
           registry-url: 'https://registry.npmjs.org'
 
       - name: Install dependencies
-        run: yarn install --immutable
+        run: |
+          corepack enable
+          yarn install --immutable --immutable-cache
 
       - name: Build package
         run: yarn build

.github/workflows/test.yml

@@ -15,10 +15,24 @@ jobs:
 
       - uses: actions/setup-node@v6
         with:
-          node-version: 25
+          node-version: 26
 
       - name: Install dependencies
-        run: yarn
+        run: |
+          corepack enable
+          yarn install --immutable --immutable-cache
 
-      - name: Run React tests
+      - name: Compile Sass (sanity check)
+        run: |
+          ./node_modules/.bin/sass --no-source-map \
+            --load-path=node_modules \
+            src/assets/styles/_shared.scss /tmp/shared.css
+
+      - name: Lint
+        run: yarn lint
+
+      - name: Build library
+        run: yarn build
+
+      - name: Run unit tests
         run: yarn test:ci

.nvmrc

@@ -1 +1 @@
-v25
+v26

.yarnrc.yml

@@ -12,4 +12,17 @@ enableTelemetry: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.13.0.cjs
+# Populate .yarn/cache with native bindings for macOS dev and Linux CI (--immutable-cache).
+supportedArchitectures:
+  cpu:
+    - current
+    - x64
+    - arm64
+  libc:
+    - current
+    - glibc
+    - musl
+  os:
+    - current
+    - darwin
+    - linux

README.md

@@ -43,14 +43,14 @@ export default function SomePage(): ReactElement {
 
 ## Development
 
-To edit components or add new ones, make sure you have Yarn v3 set up locally and then run `yarn dev`:
+To edit components or add new ones, install dependencies and run Storybook:
 
-1. Install Node v24+.
+1. Install Node v26+ (see `.nvmrc`).
 1. Enable [corepack](https://yarnpkg.com/getting-started/install): `corepack enable`.
-1. `yarn`
+1. `yarn install`
 1. `yarn start`
 
-Note: This project uses yarn v3.5 in "plug n play" mode. There is no `node_modules/` directory. Packages are stored in `.yarn/cache/`.
+This project uses Yarn 4 with the `node-modules` linker (see `.yarnrc.yml`).
 
 Edit the files in `src/components/` and your browser should hot reload your changes.
 

eslint.config.js

@@ -82,10 +82,10 @@ export default tseslint.config(
       'unicorn/null-data-property': 'off',
       'unicorn/no-null': 'off',
       'react/prop-types': 'off', // Using TypeScript, so don't use PropTypes.
-      // Resolver cannot resolve @cfpb/cfpb-design-system src subpaths (Vite alias + node_modules do at build/runtime).
+      // Resolver cannot resolve Vite/tsconfig path aliases or @cfpb/cfpb-design-system src subpaths.
       'import/no-unresolved': [
         'error',
-        { ignore: ['^@cfpb/cfpb-design-system/'] },
+        { ignore: ['^@cfpb/cfpb-design-system/', '^~/'] },
       ],
     },
   },

package.json

@@ -24,7 +24,7 @@
     "dist"
   ],
   "engines": {
-    "node": ">=24"
+    "node": ">=26.x"
   },
   "scripts": {
     "build": "vite build",
@@ -39,7 +39,7 @@
     "test:ci": "vitest run",
     "format": "prettier -uw --cache --ignore-path .gitignore .",
     "lint": "scripts/lint.sh",
-    "validate": "run-p lint test:ci test:e2e:headless",
+    "validate": "run-p lint build test:ci",
     "start": "yarn storybook",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o dist-storybook",
@@ -49,14 +49,14 @@
     "react-select": "^5.10.2"
   },
   "peerDependencies": {
-    "@cfpb/cfpb-design-system": "5.3.3",
+    "@cfpb/cfpb-design-system": "5.5.0",
     "react": "19.2.6",
     "react-dom": "19.2.6",
-    "react-router": "^7.15.0"
+    "react-router": "^7.15.1"
   },
   "devDependencies": {
     "@cfpb/browserslist-config": "^0.0.6",
-    "@cfpb/cfpb-design-system": "5.3.3",
+    "@cfpb/cfpb-design-system": "5.5.1",
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/js": "^10.0.1",
     "@fontsource-variable/source-sans-3": "5.2.9",
@@ -71,23 +71,23 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "@types/css-mediaquery": "0.1.4",
-    "@types/node": "^25.8.0",
-    "@types/react": "^19.2.14",
+    "@types/node": "^25.9.1",
+    "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
     "@types/testing-library__jest-dom": "6.0.0",
-    "@typescript-eslint/eslint-plugin": "8.59.3",
-    "@typescript-eslint/parser": "8.59.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/browser-playwright": "4.1.6",
-    "@vitest/coverage-istanbul": "^4.1.6",
+    "@typescript-eslint/eslint-plugin": "8.59.4",
+    "@typescript-eslint/parser": "8.59.4",
+    "@vitejs/plugin-react": "^6.0.2",
+    "@vitest/browser-playwright": "4.1.7",
+    "@vitest/coverage-istanbul": "^4.1.7",
     "astring": "^1.9.0",
     "autoprefixer": "10.5.0",
-    "chromatic": "^16.10.0",
+    "chromatic": "^17.0.0",
     "classnames": "^2.5.1",
     "commitizen": "4.3.1",
     "css-mediaquery": "0.1.2",
     "cz-conventional-changelog": "3.3.0",
-    "eslint": "10.3.0",
+    "eslint": "10.4.0",
     "eslint-config-prettier": "10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "2.32.0",
@@ -101,11 +101,11 @@
     "husky": "9.1.7",
     "jest-matchmedia-mock": "1.1.0",
     "jsdom": "29.1.1",
-    "lint-staged": "16.4.0",
+    "lint-staged": "17.0.5",
     "lit": "^3.3.3",
     "npm-run-all": "4.1.5",
     "playwright": "^1.60.0",
-    "postcss": "8.5.14",
+    "postcss": "8.5.15",
     "prettier": "3.8.3",
     "react": "19.2.6",
     "react-dom": "19.2.6",
@@ -116,16 +116,16 @@
     "storybook": "^10.4.0",
     "storybook-addon-tag-badges": "^3.1.0",
     "storybook-font-inspector": "^1.1.7",
-    "stylelint": "^17.11.1",
+    "stylelint": "^17.12.0",
     "stylelint-config-standard-scss": "^17.0.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.59.3",
-    "vite": "^8.0.13",
-    "vite-plugin-dts": "^4.5.4",
+    "typescript-eslint": "^8.59.4",
+    "vite": "^8.0.14",
+    "vite-plugin-dts": "^5.0.1",
     "vite-plugin-pwa": "^1.3.0",
     "vite-plugin-svgr": "^5.2.0",
     "vite-plugin-turbosnap": "^1.0.3",
-    "vitest": "^4.1.6"
+    "vitest": "^4.1.7"
   },
   "resolutions": {
     "braces": "3.0.3",
@@ -149,5 +149,5 @@
     ]
   },
   "type": "module",
-  "packageManager": "yarn@4.13.0"
+  "packageManager": "yarn@4.14.1"
 }

src/assets/styles/_shared.scss

@@ -1,7 +1,6 @@
 @use './variables';
 @use 'sass:math';
 @use 'sass:string';
-@use '@cfpb/cfpb-design-system/src/index' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
 @use '@cfpb/cfpb-design-system/src/elements/base' as base;
 
@@ -25,11 +24,11 @@
  * custom properties for the main canvas.
  */
 // Literal stack (quoted multi-word family) — matches app / design-system expectations.
-$_ds-font-stack: string.unquote('"Source Sans 3 Variable", Arial, sans-serif');
+$ds-font-stack: string.unquote('"Source Sans 3 Variable", Arial, sans-serif');
 
 :root {
-  --font-stack-branded: #{$_ds-font-stack} !important;
-  --font-stack: #{$_ds-font-stack} !important;
+  --font-stack-branded: #{$ds-font-stack} !important;
+  --font-stack: #{$ds-font-stack} !important;
 }
 
 // `!important` beats DS normalize `html { font-family: sans-serif }` if chunk
@@ -38,7 +37,7 @@ html,
 body,
 #storybook-root,
 #storybook-docs {
-  font-family: #{$_ds-font-stack} !important;
+  font-family: #{$ds-font-stack} !important;
 }
 
 /**

src/components/Alert/alert-field-level.tsx

@@ -18,8 +18,7 @@ export const MapTypeToIconName = {
   warning: 'warning',
 };
 
-export interface AlertFieldLevelProperties
-  extends HTMLAttributes<HTMLDivElement> {
+export interface AlertFieldLevelProperties extends HTMLAttributes<HTMLDivElement> {
   status?: AlertFieldLevelType;
   message: ReactNode;
   isVisible?: boolean;

src/components/Alert/alert.tsx

@@ -47,8 +47,7 @@ export const Alert = ({
   isFieldLevel = false,
   showIcon = true,
   ...properties
-}: AlertProperties &
-  HTMLAttributes<HTMLDivElement>): JSXElement => {
+}: AlertProperties & HTMLAttributes<HTMLDivElement>): JSXElement => {
   if (!isVisible) return null;
 
   if (isFieldLevel) {

src/components/Banner/banner.scss

@@ -1,6 +1,6 @@
 @use '/src/assets/styles/variables' as *;
 @use '@cfpb/cfpb-design-system/src/elements/abstracts' as *;
-@use '@cfpb/cfpb-design-system/src/utilities' as *;
+@use '@cfpb/cfpb-design-system/src/utilities/index.scss' as *;
 @use 'sass:math';
 
 .m-global-eyebrow {

src/components/Expandable/expandable-group.tsx

@@ -4,8 +4,7 @@ import React, { useEffect } from 'react';
 import type { FC, HTMLAttributes, ReactElement } from 'react';
 import type { ExpandableProperties } from './expandable';
 
-export interface ExpandableGroupProperties
-  extends HTMLAttributes<HTMLDivElement> {
+export interface ExpandableGroupProperties extends HTMLAttributes<HTMLDivElement> {
   groupId: string;
   accordion?: boolean;
   children?: ReactElement<ExpandableProperties>[];

src/components/Expandable/expandable.test.tsx

@@ -23,19 +23,19 @@ describe('<Expandable />', () => {
   });
 
   it('Initializes when not in an accordion', () => {
-    vi.spyOn(ExpandableModule, 'init');
+    const initSpy = vi.spyOn(ExpandableModule, 'init');
     render(<Expandable header={header}>{children}</Expandable>);
-    expect(ExpandableModule.init).toHaveBeenCalledTimes(1);
+    expect(initSpy).toHaveBeenCalledTimes(1);
   });
 
   it('Does not initialize when in an accordion', () => {
-    vi.spyOn(ExpandableModule, 'init');
+    const initSpy = vi.spyOn(ExpandableModule, 'init');
     render(
       <Expandable header={header} inAccordion>
         {children}
       </Expandable>,
     );
-    expect(ExpandableModule.init).not.toHaveBeenCalled();
+    expect(initSpy).not.toHaveBeenCalled();
   });
 
   it('Adds default standalone styles when not in an accordion', () => {

src/components/Footer/footer-cf-gov.tsx

@@ -1,7 +1,7 @@
 import { JSX } from 'react';
 import { Icon } from '../Icon/icon';
 import Link from '../Link/link';
-import {WebsiteFooter} from './footer';
+import { WebsiteFooter } from './footer';
 
 interface FootCfGovProperties {
   cfLink?: string;
@@ -145,17 +145,20 @@ export const FooterCfGov = ({
       key='usa-gov'
       href='https://usa.gov/'
       label='USA.gov'
-      iconRight='external-link'/>,
+      iconRight='external-link'
+    />,
     <Link
       key='inspector'
       href='https://oig.federalreserve.gov/'
       label='Office of Inspector General'
-      iconRight='external-link'/>,
+      iconRight='external-link'
+    />,
     <Link
       key='archive'
       href='https://archive-it.org/organizations/2800'
       label='Public Archive'
-      iconRight='external-link'/>
+      iconRight='external-link'
+    />,
   ];
 
   return (

src/components/Footer/footer-links.tsx

@@ -17,7 +17,9 @@ export const NavLinks = ({ children }: WrapperProperties): JSXElement => {
 
   return (
     <List className='o-footer__nav-list m-list'>
-      <ListItemBuilder itemClassname='m-list__link a-link--jump'>{children}</ListItemBuilder>
+      <ListItemBuilder itemClassname='m-list__link a-link--jump'>
+        {children}
+      </ListItemBuilder>
     </List>
   );
 };
@@ -59,4 +61,3 @@ export const FooterLinksColumn = ({
     </div>
   );
 };
-