Fix 169: Improve mutation score for chop logic components

.github/workflows/npm.yml

@@ -33,7 +33,7 @@ jobs:
         run: npm ci
 
       - name: Lint
-        run: npm run lint
+        run: npm run lint:errors
 
       - name: Test
         run: npm run test:ci

biome.json

@@ -1,10 +1,11 @@
 {
-  "$schema": "https://biomejs.dev/schemas/2.4.6/schema.json",
+  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
   "files": {
     "includes": [
       "**",
       "!**/dist",
       "!**/coverage",
+      "!**/reports",
       "!**/node_modules",
       "!**/storybook-static",
       "!**/src/styles/icons.css"

package.json

@@ -93,10 +93,9 @@
     "*.(ts|tsx)": [
       "bash -c 'npm run typecheck'"
     ],
-    "*.{js,jsx,ts,tsx,json,css}": [
-      "biome format --write",
-      "biome check --write",
-      "biome check --diagnostic-level error",
+    "*": [
+      "npm run lint:fix",
+      "npm run format",
       "npm run test:ci"
     ],
     "*.{md,mdx}": [
@@ -117,31 +116,31 @@
   },
   "homepage": "https://choplogic.github.io/chop-logic-components",
   "devDependencies": {
-    "@biomejs/biome": "^2.4.6",
-    "@commitlint/cli": "^20.4.3",
-    "@commitlint/config-conventional": "^20.4.3",
-    "@storybook/addon-a11y": "^10.2.17",
-    "@storybook/addon-docs": "^10.2.17",
-    "@storybook/react-vite": "^10.2.17",
+    "@biomejs/biome": "^2.4.7",
+    "@commitlint/cli": "^20.4.4",
+    "@commitlint/config-conventional": "^20.4.4",
+    "@storybook/addon-a11y": "^10.2.19",
+    "@storybook/addon-docs": "^10.2.19",
+    "@storybook/react-vite": "^10.2.19",
     "@stryker-mutator/core": "^9.6.0",
     "@stryker-mutator/vitest-runner": "^9.6.0",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
-    "@types/node": "^25.4.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitest/coverage-v8": "^4.0.18",
+    "@vitest/coverage-v8": "^4.1.0",
     "husky": "^9.1.7",
     "husky-init": "^8.0.0",
     "jsdom": "^28.1.0",
     "prettier": "^3.8.1",
     "remark-gfm": "^4.0.1",
-    "storybook": "^10.2.17",
+    "storybook": "^10.2.19",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   },
   "overrides": {
     "storybook": "$storybook"

src/__docs__/Variables.mdx

@@ -140,9 +140,9 @@ Our styling approach is built on three core principles:
     title="Success Colors"
     subtitle="For success states and confirmations"
     colors={{
+      "--cl-success-a0": "#9ae8ce",
       "--cl-success-a0": "#22946e",
-      "--cl-success-a10": "#47d5a6",
-      "--cl-success-a20": "#9ae8ce",
+      "--cl-success-a20": "#47d5a6",
     }}
   />
   <ColorItem
@@ -158,18 +158,18 @@ Our styling approach is built on three core principles:
     title="Danger Colors"
     subtitle="For error and destructive actions"
     colors={{
+      "--cl-danger-a0": "#eb9e9e",
       "--cl-danger-a0": "#9c2121",
-      "--cl-danger-a10": "#d94a4a;",
-      "--cl-danger-a20": "#eb9e9e",
+      "--cl-danger-a20": "#d94a4a;",
     }}
   />
   <ColorItem
     title="Info Colors"
     subtitle="For informational content"
     colors={{
+      "--cl-info-a0": "#92b2e5",
       "--cl-info-a0": "#21498a",
-      "--cl-info-a10": "#4077d1",
-      "--cl-info-a20": "#92b2e5",
+      "--cl-info-a20": "#4077d1",
     }}
   />
 </ColorPalette>

src/components/atoms/image/ResponsivePicture.tsx

@@ -17,9 +17,9 @@ type Props = {
 export const ResponsivePicture: FC<Props> = ({ sources = [], ...rest }) => {
   return (
     <picture className="cl-image__picture">
-      {sources.map((source, index) => (
+      {sources.map((source) => (
         <source
-          key={`${source.src}-${index}`}
+          key={source.src}
           srcSet={source.descriptor ? `${source.src} ${source.descriptor}` : source.src}
           media={source.media}
           type={source.type}

src/styles/main.css

@@ -141,7 +141,6 @@
   --cl-danger-border: 1px solid #d94a4a;
   --cl-success-border: 1px solid #28be8a;
   --cl-warning-border: 1px solid #dfae44;
-  --cl-danger-border: 1px solid #d06262;
   --cl-info-border: 1px solid #347ada;
   --cl-light-border: 1px solid #c0b8b6;
   --cl-outline-border: 1px solid #000000;
@@ -175,24 +174,24 @@
   --cl-surface-tonal-a30: #665d63;
 
   /** Success colors */
-  --cl-success-a0: #22946e;
+  --cl-success-a0: #9ae8ce;
   --cl-success-a10: #47d5a6;
-  --cl-success-a20: #9ae8ce;
+  --cl-success-a20: #22946e;
 
   /** Warning colors */
   --cl-warning-a0: #a87a2a;
   --cl-warning-a10: #d7ac61;
   --cl-warning-a20: #ecd7b2;
 
   /** Danger colors */
-  --cl-danger-a0: #9c2121;
+  --cl-danger-a0: #eb9e9e;
   --cl-danger-a10: #d94a4a;
-  --cl-danger-a20: #eb9e9e;
+  --cl-danger-a20: #9c2121;
 
   /** Info colors */
-  --cl-info-a0: #21498a;
+  --cl-info-a0: #92b2e5;
   --cl-info-a10: #4077d1;
-  --cl-info-a20: #92b2e5;
+  --cl-info-a20: #21498a;
 
   /* Dark Theme Gradients */
   --cl-accent-gradient: linear-gradient(135deg, #eb5cbe 0%, #ef71c5 50%, #f385cc 100%);
@@ -208,7 +207,6 @@
   --cl-danger-border: 1px solid #d94a4a;
   --cl-success-border: 1px solid #47d5a6;
   --cl-warning-border: 1px solid #d7ac61;
-  --cl-danger-border: 1px solid #d94a4a;
   --cl-info-border: 1px solid #4077d1;
   --cl-light-border: 1px solid #665d63;
   --cl-outline-border: 1px solid #ffffff;

vite.config.ts

@@ -32,7 +32,6 @@ export default defineConfig({
       external: ['react', 'react-dom', 'react/jsx-runtime'],
       output: {
         exports: 'named',
-        compact: true,
         preserveModules: true,
         preserveModulesRoot: 'src',
         entryFileNames: (chunkInfo) => {