@stackoverflow/stacks 2.7.5 → 2.8.1

package/lib/components/modal/modal.less

@@ -82,7 +82,6 @@
         transform: translate3d(0, 30%, 0) scale3d(0.6, 0.6, 0.6);
         transition: opacity 200ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms, transform 100ms var(--te-smooth) 0s, transform 100ms var(--te-smooth) 0s; // Transition out
         visibility: hidden;
-        will-change: visibility, z-index, opacity, transform; // Not supported by Edge
         z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
     }
 
@@ -113,6 +112,5 @@
     position: fixed;
     transition: opacity 100ms var(--te-smooth) 0s, z-index 0s 100ms, visibility 0s 100ms; // Transition out
     visibility: hidden;
-    will-change: visibility, z-index, opacity; // Not supported in Edge
     z-index: var(--zi-hide); // Make sure it's also below everything so we can't interact with it.
 }

package/lib/components/skeleton/skeleton.less

@@ -0,0 +1,73 @@
+.s-skeleton {
+    // BASE COMPONENT-SPECIFIC CUSTOM PROPERTIES
+    // TODO verify colors with design
+    --_sk-bg-1: var(--black-400);
+    --_sk-bg-2: var(--black-350);
+    --_sk-bg-3: var(--black-300);
+    --_sk-o: 0.25;
+
+    // CONTEXTUAL STYLES
+    .highcontrast-mode({
+        --_sk-o: 0.4;
+    });
+
+    @keyframes flow {
+        0% {
+            background-position: 400% 50%;
+        }
+        100% {
+            background-position: 0% 50%;
+        }
+    }
+
+    // VARIANTS
+    &&__ai {
+        --_sk-bg-1: #ac76f0;
+        --_sk-bg-2: #297fff;
+        --_sk-bg-3: #6abcf8;
+    }
+
+    &,
+    &:after,
+    &:before {
+        @media (prefers-reduced-motion: no-preference) {
+            animation: flow 8s linear infinite;
+        }
+
+        background-image: linear-gradient(
+            to right,
+            var(--_sk-bg-1) 8%,
+            var(--_sk-bg-2) 16%,
+            var(--_sk-bg-3) 25%,
+            var(--_sk-bg-1) 42%,
+            var(--_sk-bg-2) 58%,
+            var(--_sk-bg-3) 75%,
+            var(--_sk-bg-1) 83%
+        );
+        background-size: 400% 100%;
+        border-radius: var(--br-lg);
+        display: block;
+        height: var(--su16);
+        position: relative;
+    }
+
+    &:after,
+    &:before {
+        content: '';
+        position: relative;
+    }
+
+    &:after {
+        top: calc(var(--su4));
+        width: calc(2/3 * 100%);
+    }
+
+    &:before {
+        top: calc(var(--su32) + var(--su8));
+        width: calc(1/3 * 100%);
+    }
+
+    margin-bottom: var(--su48);
+    opacity: var(--_sk-o);
+    width: 100%;
+}

package/lib/stacks-static.less

@@ -43,6 +43,7 @@
 @import "components/prose/prose.less";
 @import "components/select/select.less";
 @import "components/sidebar-widget/sidebar-widget.less";
+@import "components/skeleton/skeleton.less";
 @import "components/spinner/spinner.less";
 @import "components/table/table.less";
 @import "components/table-container/table-container.less";

package/package.json

@@ -5,7 +5,7 @@
         "type": "git",
         "url": "https://github.com/StackExchange/Stacks.git"
     },
-    "version": "2.7.5",
+    "version": "2.8.1",
     "files": [
         "dist",
         "lib",
@@ -45,16 +45,16 @@
         "@popperjs/core": "^2.11.8"
     },
     "devDependencies": {
-        "@11ty/eleventy": "^3.0.0",
+        "@11ty/eleventy": "^3.1.0",
         "@changesets/changelog-github": "^0.5.1",
-        "@changesets/cli": "^2.29.3",
-        "@eslint/js": "^9.26.0",
+        "@changesets/cli": "^2.29.5",
+        "@eslint/js": "^9.30.0",
         "@highlightjs/cdn-assets": "^11.11.1",
         "@open-wc/testing": "^4.0.0",
         "@rollup/plugin-commonjs": "^26.0.1",
         "@rollup/plugin-replace": "^6.0.2",
-        "@stackoverflow/stacks-editor": "^0.13.0",
-        "@stackoverflow/stacks-icons": "^6.2.0",
+        "@stackoverflow/stacks-editor": "^0.15.2",
+        "@stackoverflow/stacks-icons": "^6.6.1",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/user-event": "^14.6.1",
         "@types/cssbeautify": "^0.3.5",
@@ -67,34 +67,35 @@
         "@web/test-runner-visual-regression": "^0.10.0",
         "apca-check": "^0.1.1",
         "colorjs.io": "^0.5.2",
-        "concurrently": "^9.1.2",
+        "concurrently": "^9.2.0",
         "css-loader": "^7.1.2",
         "cssbeautify": "^0.3.1",
-        "cssnano": "^7.0.6",
+        "cssnano": "^7.0.7",
         "docsearch.js": "^2.6.3",
         "eleventy-plugin-highlightjs": "^1.1.0",
+        "eleventy-plugin-llms-txt": "^1.2.0",
         "eleventy-plugin-nesting-toc": "^1.3.0",
-        "eslint": "^9.25.0",
-        "eslint-config-prettier": "^10.1.2",
+        "eslint": "^9.31.0",
+        "eslint-config-prettier": "^10.1.5",
         "eslint-plugin-no-unsanitized": "^4.1.2",
         "jquery": "^3.7.1",
-        "less-loader": "^12.2.0",
+        "less-loader": "^12.3.0",
         "list.js": "^2.3.1",
         "markdown-it": "^14.1.0",
         "mini-css-extract-plugin": "^2.9.2",
         "postcss-less": "^6.0.0",
         "postcss-loader": "^8.1.1",
-        "prettier": "^3.5.3",
+        "prettier": "^3.6.2",
         "rollup-plugin-postcss": "^4.0.2",
-        "stylelint": "^16.19.1",
+        "stylelint": "^16.21.1",
         "stylelint-config-recommended": "^16.0.0",
         "stylelint-config-standard": "^38.0.0",
         "terser-webpack-plugin": "^5.3.14",
         "ts-loader": "^9.5.2",
         "typescript": "^5.8.3",
-        "typescript-eslint": "^8.32.0",
+        "typescript-eslint": "^8.35.1",
         "vitest": "^3.1.3",
-        "webpack": "^5.99.7",
+        "webpack": "^5.99.9",
         "webpack-cli": "^6.0.1",
         "webpack-merge": "^6.0.1"
     },