chore(deps): upgrade dependencies (#2130)

giamir · web-flow · commit e2dea1521656 · 2026-01-16T15:11:22.000+01:00
diff --git a/.changeset/ripe-paths-tell.md b/.changeset/ripe-paths-tell.md
@@ -0,0 +1,7 @@
+---
+"@stackoverflow/stacks-svelte": patch
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-utils": patch
+---
+
+dependencies upgrade
diff --git a/.stylelintrc b/.stylelintrc
@@ -13,10 +13,11 @@
     "selector-pseudo-element-colon-notation": "single",
     "no-descending-specificity": null,
     "no-invalid-position-at-import-rule": null,
+    "nesting-selector-no-missing-scoping-root": null,
     "selector-disallowed-list": [
       "/[.#]js-/",
       {
-        "message": "js-* selectors can’t have visual styling. https://stackoverflow.design/product/develop/javascript/#javascript-classnames"
+        "message": "js-* selectors can't have visual styling. https://stackoverflow.design/product/develop/javascript/#javascript-classnames"
       }
     ]
   }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,82 +20,81 @@
         "test": "npm run test -workspaces -if-present"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^3.1.0",
-        "@changesets/changelog-github": "^0.5.1",
-        "@changesets/cli": "^2.29.5",
-        "@eslint/js": "^9.30.0",
+        "@11ty/eleventy": "^3.1.2",
+        "@changesets/changelog-github": "^0.5.2",
+        "@changesets/cli": "^2.29.8",
+        "@eslint/js": "^9.39.2",
         "@highlightjs/cdn-assets": "^11.11.1",
         "@open-wc/testing": "^4.0.0",
-        "@remcovaes/web-test-runner-vite-plugin": "^1.3.0",
+        "@remcovaes/web-test-runner-vite-plugin": "^1.4.0",
         "@rollup/plugin-commonjs": "^26.0.1",
         "@rollup/plugin-replace": "^6.0.3",
         "@stackoverflow/prettier-config": "^1.0.0",
         "@stackoverflow/stacks-icons": "^7.0.0-beta.14",
         "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.9.0",
-        "@storybook/addon-docs": "^9.1.5",
-        "@storybook/addon-links": "^9.1.3",
-        "@storybook/addon-svelte-csf": "^5.0.8",
-        "@storybook/svelte": "^9.1.5",
-        "@storybook/svelte-vite": "^9.1.15",
-        "@sveltejs/package": "^2.5.0",
-        "@sveltejs/vite-plugin-svelte": "^5.1.0",
-        "@testing-library/dom": "^10.4.0",
-        "@testing-library/svelte": "^5.2.8",
+        "@storybook/addon-docs": "^10.1.11",
+        "@storybook/addon-links": "^10.1.11",
+        "@storybook/addon-svelte-csf": "^5.0.10",
+        "@storybook/svelte-vite": "^10.1.11",
+        "@sveltejs/package": "^2.5.7",
+        "@sveltejs/vite-plugin-svelte": "^6.2.4",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/svelte": "^5.3.1",
         "@testing-library/user-event": "^14.6.1",
         "@types/babel__core": "^7.20.5",
         "@types/cssbeautify": "^0.3.5",
         "@types/less": "^3.0.8",
         "@types/mocha": "^10.0.10",
-        "@typescript-eslint/parser": "^8.42.0",
+        "@typescript-eslint/parser": "^8.53.0",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/dev-server-rollup": "^0.6.4",
-        "@web/test-runner": "^0.20.1",
+        "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
         "apca-check": "^0.1.1",
         "chai-dom": "^1.12.1",
-        "colorjs.io": "^0.5.2",
-        "concurrently": "^9.2.0",
+        "colorjs.io": "^0.6.1",
+        "concurrently": "^9.2.1",
         "css-loader": "^7.1.2",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^7.0.7",
+        "cssnano": "^7.1.2",
         "eleventy-plugin-highlightjs": "^1.1.0",
         "eleventy-plugin-llms-txt": "^1.2.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^9.35.0",
+        "eslint": "^9.39.2",
         "eslint-config-prettier": "^10.1.8",
         "eslint-plugin-chai-friendly": "^1.1.0",
-        "eslint-plugin-no-unsanitized": "^4.1.2",
-        "eslint-plugin-prettier": "^5.5.4",
-        "eslint-plugin-svelte": "^3.13.0",
-        "globals": "^16.4.0",
+        "eslint-plugin-no-unsanitized": "^4.1.4",
+        "eslint-plugin-prettier": "^5.5.5",
+        "eslint-plugin-svelte": "^3.14.0",
+        "globals": "^17.0.0",
         "htm": "^3.1.1",
         "less-loader": "^12.3.0",
         "markdown-it": "^14.1.0",
-        "mini-css-extract-plugin": "^2.9.2",
+        "mini-css-extract-plugin": "^2.9.4",
         "postcss-less": "^6.0.0",
-        "postcss-loader": "^8.1.1",
-        "prettier": "^3.6.2",
-        "prettier-plugin-svelte": "^3.4.0",
-        "rimraf": "^6.0.1",
+        "postcss-loader": "^8.2.0",
+        "prettier": "^3.8.0",
+        "prettier-plugin-svelte": "^3.4.1",
+        "rimraf": "^6.1.2",
         "rollup-plugin-postcss": "^4.0.2",
-        "sass": "^1.93.2",
-        "sinon": "^20.0.0",
-        "storybook": "^9.1.5",
-        "stylelint": "^16.25.0",
-        "stylelint-config-recommended": "^16.0.0",
-        "stylelint-config-standard": "^39.0.1",
-        "svelte": "^5.39.11",
-        "svelte-check": "^4.3.3",
+        "sass": "^1.97.2",
+        "sinon": "^21.0.1",
+        "storybook": "^10.1.11",
+        "stylelint": "^17.0.0",
+        "stylelint-config-recommended": "^18.0.0",
+        "stylelint-config-standard": "^40.0.0",
+        "svelte": "^5.46.4",
+        "svelte-check": "^4.3.5",
         "svelte-preprocess": "^6.0.3",
-        "terser-webpack-plugin": "^5.3.14",
-        "ts-loader": "^9.5.2",
+        "terser-webpack-plugin": "^5.3.16",
+        "ts-loader": "^9.5.4",
         "typescript": "^5.9.3",
-        "typescript-eslint": "^8.46.1",
-        "vite": "^6.4.1",
-        "vitest": "^3.1.3",
-        "webpack": "^5.102.1",
+        "typescript-eslint": "^8.53.0",
+        "vite": "^7.3.1",
+        "vitest": "^4.0.17",
+        "webpack": "^5.104.1",
         "webpack-cli": "^6.0.1",
         "webpack-merge": "^6.0.1"
     },
diff --git a/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap b/packages/stacks-classic/lib/atomic/__snapshots__/misc.less.test.ts.snap
@@ -273,6 +273,7 @@ exports[`atomic: misc > should output all atomic css classes 1`] = `
 
 .v-visible-sr {
     border: 0;
+  /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
     clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1));
     clip-path: inset(50%);
     height: var(--su-static1);
diff --git a/packages/stacks-classic/lib/atomic/misc.less b/packages/stacks-classic/lib/atomic/misc.less
@@ -179,6 +179,7 @@
     // Borrowed from Wordpress
     // https://make.wordpress.org/accessibility/2015/02/09/hiding-text-for-screen-readers-with-wordpress-core/
     border: 0;
+    /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
     clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
     clip-path: inset(50%);
     height: var(--su-static1);
diff --git a/packages/stacks-classic/lib/components/button/button.less b/packages/stacks-classic/lib/components/button/button.less
@@ -248,6 +248,7 @@
     &--radio { // This lives alongside a .s-btn element. These styles are the equivelent of `.v-visible-sr`
         border: 0;
         clip-path: inset(50%);
+        /* stylelint-disable-next-line property-no-deprecated -- clip is kept for older browser compatibility alongside clip-path */
         clip: rect(var(--su-static1), var(--su-static1), var(--su-static1), var(--su-static1)); // rect(1px, 1px, 1px, 1px)
         height: var(--su-static1);
         margin: var(--sun1);
diff --git a/packages/stacks-classic/lib/components/notice/notice.less b/packages/stacks-classic/lib/components/notice/notice.less
@@ -171,7 +171,7 @@
         //Add spacing between multiple notice actions
         gap: calc(var(--su24) - var(--su2)); //22px
         //Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component
-        word-wrap: initial !important;
+        overflow-wrap: initial !important;
     }
 
     // STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES
diff --git a/packages/stacks-svelte/.storybook/main.ts b/packages/stacks-svelte/.storybook/main.ts
@@ -21,5 +21,17 @@ const config: StorybookConfig = {
             },
         },
     },
+    viteFinal: (config) => {
+        // Include svelte-sonner in optimizeDeps to ensure its virtual CSS modules
+        // (from <style global> blocks) are properly processed by vite-plugin-svelte.
+        // Without this, Storybook fails to load the Toaster component styles.
+        // Note: svelte-sonner is excluded in vite.config.ts for test compatibility,
+        // but Storybook needs it included for proper CSS handling.
+        config!.optimizeDeps!.exclude = config?.optimizeDeps?.exclude?.filter(
+            (dep) => dep !== "svelte-sonner"
+        );
+
+        return config;
+    },
 };
 export default config;
diff --git a/packages/stacks-svelte/package.json b/packages/stacks-svelte/package.json
@@ -38,7 +38,7 @@
         "@stackoverflow/stacks-icons-legacy": "npm:@stackoverflow/stacks-icons@^6.9.0",
         "@stackoverflow/stacks-utils": "^1.0.0-beta.0",
         "svelte-floating-ui": "^1.6.2",
-        "svelte-sonner": "^1.0.5"
+        "svelte-sonner": "^1.0.7"
     },
     "files": [
         "lib",
diff --git a/packages/stacks-svelte/src/components/Menu/MenuItem.svelte b/packages/stacks-svelte/src/components/Menu/MenuItem.svelte
@@ -10,11 +10,10 @@
     } from "svelte/elements";
     import Icon from "../Icon/Icon.svelte";
 
-    interface Props
-        extends Omit<
-            HTMLAnchorAttributes & HTMLButtonAttributes,
-            "href" | "type" | "class"
-        > {
+    interface Props extends Omit<
+        HTMLAnchorAttributes & HTMLButtonAttributes,
+        "href" | "type" | "class"
+    > {
         /**
          * If provided, renders as an anchor tag with this href
          */
diff --git a/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte b/packages/stacks-svelte/src/components/Navigation/NavigationItem.svelte
@@ -8,11 +8,10 @@
     import Avatar from "../Avatar/Avatar.svelte";
     import { slide } from "svelte/transition";
 
-    interface Props
-        extends Omit<
-            HTMLAnchorAttributes & HTMLButtonAttributes,
-            "href" | "class"
-        > {
+    interface Props extends Omit<
+        HTMLAnchorAttributes & HTMLButtonAttributes,
+        "href" | "class"
+    > {
         /**
          * The text of the navigation item
          */
diff --git a/packages/stacks-svelte/src/components/Popover/Popover.svelte b/packages/stacks-svelte/src/components/Popover/Popover.svelte
@@ -132,6 +132,8 @@
     // if the visible prop is passed, the component is controlled
     const controlled = $derived(visible !== undefined);
 
+    // svelte-ignore state_referenced_locally
+    // placement and strategy are intentionally captured at init - update() is used to change placement dynamically
     const [floatingRef, floatingContent, update] = createFloatingActions({
         placement,
         strategy,
@@ -197,6 +199,9 @@
         }
     };
 
+    // svelte-ignore state_referenced_locally
+    // Props are intentionally captured at init. The component manages visibility internally
+    // (uncontrolled mode) or syncs from props via $effect (controlled mode).
     const pstate = $state<PopoverState>({
         id,
         controlled: visible !== undefined,
diff --git a/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte b/packages/stacks-svelte/src/components/UserCard/UserCard.stories.svelte
@@ -128,7 +128,7 @@
                         {/snippet}
                         {#snippet recognition()}
                             <span>Recognized by</span>
-                            <a href="#"> AudioBubble </a>
+                            <a href="/"> AudioBubble </a>
                         {/snippet}
                         {#snippet bio()}
                             <p class="s-user-card--bio">
diff --git a/packages/stacks-svelte/src/components/Vote/Vote.svelte b/packages/stacks-svelte/src/components/Vote/Vote.svelte
@@ -134,7 +134,11 @@
     let expandable = $derived(
         upvotes !== undefined && downvotes !== undefined && !horizontal
     );
+    // svelte-ignore state_referenced_locally
+    // Props are intentionally captured as initial values. The component uses optimistic updates
+    // for vote actions, so local state may temporarily diverge from props during async operations.
     let currentCount = $state(total || 0);
+    // svelte-ignore state_referenced_locally
     let currentStatus = $state(status);
     const classes = $derived(getClasses(className, expanded, horizontal));
 

Original file line number	Diff line number	Diff line change
`@@ -13,10 +13,11 @@`
`13`	`13`	`"selector-pseudo-element-colon-notation": "single",`
`14`	`14`	`"no-descending-specificity": null,`
`15`	`15`	`"no-invalid-position-at-import-rule": null,`
	`16`	`+ "nesting-selector-no-missing-scoping-root": null,`
`16`	`17`	`"selector-disallowed-list": [`
`17`	`18`	`"/[.#]js-/",`
`18`	`19`	`{`
`19`		`- "message": "js-* selectors can’t have visual styling. https://stackoverflow.design/product/develop/javascript/#javascript-classnames"`
	`20`	`+ "message": "js-* selectors can't have visual styling. https://stackoverflow.design/product/develop/javascript/#javascript-classnames"`
`20`	`21`	`}`
`21`	`22`	`]`
`22`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -171,7 +171,7 @@`
`171`	`171`	`//Add spacing between multiple notice actions`
`172`	`172`	`gap: calc(var(--su24) - var(--su2)); //22px`
`173`	`173`	`//Fix css issue caused by svelte-sonner-toast in the NoticeAction svelte component`
`174`		`- word-wrap: initial !important;`
	`174`	`+ overflow-wrap: initial !important;`
`175`	`175`	`}`
`176`	`176`
`177`	`177`	`// STYLES MODIFIED BY COMPONENT-SPECIFIC CUSTOM PROPERTIES`