Nx upgrade 2025

.eslintrc.json

@@ -40,11 +40,7 @@
       ],
       "extends": [
         "plugin:@nx/typescript"
-      ],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      ]
     },
     {
       "files": [
@@ -53,11 +49,7 @@
       ],
       "extends": [
         "plugin:@nx/javascript"
-      ],
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      ]
     },
     {
       "files": [
@@ -73,11 +65,7 @@
       "extends": [
         "plugin:@nx/typescript"
       ],
-      "env": {},
-      "rules": {
-        "@typescript-eslint/no-extra-semi": "error",
-        "no-extra-semi": "off"
-      }
+      "env": {}
     },
     {
       "files": "*.json",
@@ -97,4 +85,4 @@
   "extends": [
     "plugin:storybook/recommended"
   ]
-}
+}

apps/element-storybook/.storybook/ElementTheme.ts

@@ -21,11 +21,11 @@ export default create({
   // Text colors
   textColor: 'rgb(33, 33, 33)',
   textInverseColor: 'rgb(255, 103, 31)',
-  textMutedColor: '#fafafa',
+  // textMutedColor: '#fafafa',
 
   // Toolbar default and active colors
   barTextColor: 'rgb(33, 33, 33)',
   barHoverColor: '#ff0000',
   barSelectedColor: 'rgb(255, 103, 31)',
-  barBg: '#ffffff',
+  // barBg: '#ffffff',
 });

apps/element-storybook/.storybook/main.ts

@@ -53,6 +53,8 @@ const config: StorybookConfig = {
 
   staticDirs: ['../../../static'],
   features: {
+    actions: false,
+    interactions: false,
     storyStoreV7: false
   },
 

apps/element-storybook/.storybook/manager-head.html

@@ -1,5 +1,8 @@
 <style>
   .sidebar-header {
+    > div > a {
+      display: block
+    }
     .version-number {
       color: #FFE5CC;
     }
@@ -53,5 +56,5 @@
   }
   #icon--group {
       color: rgb(255, 103, 31);
-    }
+  }
 </style>

apps/element-storybook/.storybook/preview.tsx

@@ -7,7 +7,7 @@ import { ThemeProvider } from '@availity/theme-provider';
 
 const withThemeProvider = (Story: () => React.JSX.Element, context: StoryContext) => {
   return (
-    <ThemeProvider theme={context.globals.theme || 'lightTheme'}>
+    <ThemeProvider theme={context.globals.theme !== '_reset' ? context.globals.theme : 'lightTheme'}>
       <Story />
     </ThemeProvider>
   );

package.json

@@ -28,8 +28,8 @@
     "publish:affected:canary": "nx affected --target=publish:canary",
     "start": "yarn start:storybook",
     "start:storybook": "nx storybook element-storybook",
-    "test": "nx run-many --target=test --all",
-    "test:affected": "nx affected --target=test",
+    "test": "nx run-many --target=test --all --runInBand",
+    "test:affected": "nx affected --target=test --runInBand",
     "test:coverage": "nx run-many --target=test --all --parallel=3 --runInBand --coverage --no-cache  && node ./scripts/merge-coverage.js",
     "version:affected": "nx affected --target=version --parallel=1",
     "version:affected:canary": "nx affected --target=version --parallel=1 --verbose --preid=alpha --releaseAs=prerelease ${*}",
@@ -44,20 +44,20 @@
     "@jscutlery/semver": "~5.7.0",
     "@mui/lab": "7.0.1-beta.18",
     "@mui/x-data-grid": "^8.16.0",
-    "@nx/devkit": "21.4.0",
-    "@nx/eslint": "21.4.0",
-    "@nx/eslint-plugin": "21.4.0",
-    "@nx/jest": "21.4.0",
-    "@nx/js": "21.4.0",
-    "@nx/plugin": "21.4.0",
-    "@nx/react": "21.4.0",
-    "@nx/storybook": "21.4.0",
-    "@nx/vite": "21.4.0",
-    "@nx/workspace": "21.4.0",
-    "@storybook/addon-a11y": "9.1.9",
-    "@storybook/addon-docs": "9.1.9",
-    "@storybook/addon-themes": "9.1.9",
-    "@storybook/react-vite": "9.1.9",
+    "@nx/devkit": "22.2.2",
+    "@nx/eslint": "22.2.2",
+    "@nx/eslint-plugin": "22.2.2",
+    "@nx/jest": "22.2.2",
+    "@nx/js": "22.2.2",
+    "@nx/plugin": "22.2.2",
+    "@nx/react": "22.2.2",
+    "@nx/storybook": "22.2.2",
+    "@nx/vite": "22.2.2",
+    "@nx/workspace": "22.2.2",
+    "@storybook/addon-a11y": "10.1.4",
+    "@storybook/addon-docs": "10.1.4",
+    "@storybook/addon-themes": "10.1.4",
+    "@storybook/react-vite": "10.1.4",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "16.1.0",
@@ -67,16 +67,16 @@
     "@types/qs": "^6.9.18",
     "@types/react": "19.2.2",
     "@types/react-dom": "19.2.2",
-    "@typescript-eslint/eslint-plugin": "7.18.0",
-    "@typescript-eslint/parser": "7.18.0",
+    "@typescript-eslint/eslint-plugin": "8.52.0",
+    "@typescript-eslint/parser": "8.52.0",
     "babel-jest": "30.0.5",
     "eslint": "8.57.0",
     "eslint-config-prettier": "10.1.1",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.1",
     "eslint-plugin-react": "7.32.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-storybook": "9.1.9",
+    "eslint-plugin-react-hooks": "7.0.0",
+    "eslint-plugin-storybook": "10.1.4",
     "glob": "^7.2.3",
     "husky": "^9.1.7",
     "is-ci": "^4.1.0",
@@ -89,7 +89,7 @@
     "jsonc-eslint-parser": "^2.4.0",
     "libphonenumber-js": "1.11.4",
     "lint-staged": "^15.5.0",
-    "nx": "21.4.0",
+    "nx": "22.1.3",
     "prettier": "^3.5.3",
     "react-hook-form": "^7.55.0",
     "react-imask": "7.6.1",
@@ -98,16 +98,16 @@
     "ts-jest": "29.4.5",
     "ts-node": "10.9.1",
     "tslib": "^2.8.1",
-    "typescript": "5.8.3",
+    "typescript": "5.9.3",
     "undici": "^5.29.0",
-    "vite": "6.4.1",
+    "vite": "7.2.6",
     "vite-plugin-node-polyfills": "^0.24.0"
   },
   "packageManager": "yarn@4.12.0",
   "msw": {
     "workerDirectory": "static"
   },
   "dependencies": {
-    "storybook": "9.1.9"
+    "storybook": "10.1.4"
   }
 }

packages/accordion/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [2.1.0](https://github.com/Availity/element/compare/@availity/mui-accordion@2.0.2...@availity/mui-accordion@2.1.0) (2025-12-31)
+
+
+### Features
+
+* added expanded flush variant to states as well as flush option to spacing, UXDS-999 ([0e43b14](https://github.com/Availity/element/commit/0e43b143f7a6afa64aede0066fae4ac9acaf6b2f))
+* added flush variant for accordion component, UXDS-999 ([31e6a5b](https://github.com/Availity/element/commit/31e6a5b21a7cf47d9f6eded41f57baaafe2cea26))
+* rounded the corners of nested accordions to 4px, UXDS-999 ([9e9013c](https://github.com/Availity/element/commit/9e9013c1a342b2a5cadba88ca8c6a09f3ec71a45))
+
+
+### Bug Fixes
+
+* added flush as an option for variants on accordion storybook page, UXDS-999 ([3ad5734](https://github.com/Availity/element/commit/3ad5734da5f53e0ebc28846345ba616836e3f215))
+* fixed accidental paste, UXDS-999 ([d12a542](https://github.com/Availity/element/commit/d12a54212456090e00ec9072fb0811025ff6e34c))
+* fixed another naming issue, UXDS-999 ([fe02598](https://github.com/Availity/element/commit/fe0259892eca9f569a7d0cb5a6012455f638c5c3))
+* fixed naming issue, UXDS-999 ([ddd24d2](https://github.com/Availity/element/commit/ddd24d299e6d953771b170e207386e65696684c5))
+* fixed spacing between button and header, UXDS-999 ([a5be06f](https://github.com/Availity/element/commit/a5be06fd731e0d55a34165f359d7fc22c5cdb1bc))
+* removed shared styles, UXDS-999 ([b150b28](https://github.com/Availity/element/commit/b150b28d2da33e0dc1e6b68f1e660e9de1d7b27f))
+
 ## [2.0.2](https://github.com/Availity/element/compare/@availity/mui-accordion@2.0.1...@availity/mui-accordion@2.0.2) (2025-12-09)
 
 ### Dependency Updates

packages/accordion/README.md

@@ -4,7 +4,7 @@
 
 [![Version](https://img.shields.io/npm/v/@availity/mui-accordion.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-accordion)
 [![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-accordion.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-accordion)
-[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-accordion?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-accordion/package.json)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-accordion?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/accordion/package.json)
 
 ## Documentation
 

packages/accordion/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-accordion",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "Availity MUI Accordion Component - part of the @availity/element design system",
   "keywords": [
     "react",

packages/accordion/src/lib/Accordion.stories.tsx

@@ -13,7 +13,7 @@ const meta: Meta<typeof Accordion> = {
   tags: ['autodocs'],
   argTypes: {
     variant: {
-      options: ['filled', 'outlined'],
+      options: ['filled', 'outlined', 'flush'],
     },
   },
 };
@@ -85,6 +85,28 @@ export const _Variants: StoryObj<typeof Accordion> = {
           </AccordionDetails>
         </Accordion>
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Accordion {...args} variant='flush'>
+          <AccordionSummary aria-controls="flush-summary-content" id="flush-summary-header" secondary="Secondary">
+            Flush
+          </AccordionSummary>
+          <AccordionDetails>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit
+            leo lobortis eget.
+            <Box sx={{ mt: 2 }}>
+              <Accordion {...args} variant='flush'>
+                <AccordionSummary aria-controls="flush-nested-content" id="flush-nested-header">
+                  Flush Nested Accordion
+                </AccordionSummary>
+                <AccordionDetails>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+                  blandit leo lobortis eget.
+                </AccordionDetails>
+              </Accordion>
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+      </Grid>
     </Grid>
   ),
 };
@@ -97,13 +119,13 @@ export const _Variants: StoryObj<typeof Accordion> = {
  * this is due to Material's default gutter behavior when expanded along with how they overwrite the behavior when disabling the gutters.
  */
 export const _Spacing: StoryObj<typeof Accordion> = {
-  render: () => (
+  render: (args: AccordionProps) => (
     <div>
       <Typography variant="h5" component="h2">
         Grouped
       </Typography>
       <div>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel1-content" id="grouped-panel1-header">
             Accordion 1
           </AccordionSummary>
@@ -112,7 +134,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
             leo lobortis eget.
           </AccordionDetails>
         </Accordion>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel2-content" id="grouped-panel2-header">
             Accordion 2
           </AccordionSummary>
@@ -121,7 +143,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
             leo lobortis eget.
           </AccordionDetails>
         </Accordion>
-        <Accordion>
+        <Accordion {...args}>
           <AccordionSummary aria-controls="grouped-panel3-content" id="grouped-panel3-header">
             Accordion 3 with Actions
           </AccordionSummary>
@@ -140,7 +162,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           Separated in a Grid
         </Typography>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel1-content" id="panel1-header">
               Accordion 4
             </AccordionSummary>
@@ -151,7 +173,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           </Accordion>
         </Grid>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel2-content" id="panel2-header">
               Accordion 5
             </AccordionSummary>
@@ -162,7 +184,7 @@ export const _Spacing: StoryObj<typeof Accordion> = {
           </Accordion>
         </Grid>
         <Grid size={{ xs: 12 }}>
-          <Accordion>
+          <Accordion {...args}>
             <AccordionSummary aria-controls="panel3-content" id="panel3-header">
               Accordion 6 with Actions
             </AccordionSummary>
@@ -220,6 +242,24 @@ export const _States: StoryObj<typeof Accordion> = {
           </AccordionDetails>
         </Accordion>
       </Grid>
+      <Grid size={{ xs: 12 }}>
+        <Accordion {...args} variant="flush" defaultExpanded>
+          <AccordionSummary aria-controls="flushexpanded-content" id="flushexpanded-header">
+            Flush Expanded
+          </AccordionSummary>
+          <AccordionDetails>
+            <Accordion>
+              <AccordionSummary aria-controls="flushexpanded-nested-content" id="flushexpanded-nested-header">
+                Flush  Nested Accordion
+              </AccordionSummary>
+              <AccordionDetails>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+                blandit leo lobortis eget.
+              </AccordionDetails>
+            </Accordion>
+          </AccordionDetails>
+        </Accordion>
+      </Grid>
       <Grid size={{ xs: 12 }}>
         <Accordion {...args}>
           <AccordionSummary aria-controls="focused-content" id="focused-header" className="Mui-focusVisible">