diff --git a/.changeset/lovely-hotels-arrive.md b/.changeset/lovely-hotels-arrive.md
new file mode 100644
index 0000000000..996dccdf2b
--- /dev/null
+++ b/.changeset/lovely-hotels-arrive.md
@@ -0,0 +1,7 @@
+---
+"@stackoverflow/stacks": patch
+"@stackoverflow/stacks-svelte": minor
+---
+
+feat(empty-state): new SHINE styles and Svelte Component
+fix(expanding-input): expands correctly now after textarea update
diff --git a/package-lock.json b/package-lock.json
index 6aa6eafc8e..87457bc71c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -119,7 +119,6 @@
             "integrity": "sha512-IcsDlbXnBf8cHzbM1YBv3JcTyLB35EK88QexmVyFdVJVgUU6bh9g687rpxryJirHzo06PuwnYaEEdVZQfIgRGg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@11ty/dependency-tree": "^4.0.0",
                 "@11ty/dependency-tree-esm": "^2.0.0",
@@ -404,7 +403,6 @@
             "integrity": "sha512-h0Un1ieD+HUrzBH6dJXhod3ifSghk5Hw/2Y4/KHBziPlZecrFyE9YOTPU6eOs0V9pYl8gOs86fkr/KN8lUX39A==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@keyv/serialize": "^1.1.1"
             }
@@ -767,7 +765,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18"
             },
@@ -791,7 +788,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=18"
             }
@@ -1780,15 +1776,13 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@lezer/common/-/common-1.3.0.tgz",
             "integrity": "sha512-L9X8uHCYU310o99L3/MpJKYxPzXPOS7S0NmBaM7UO/x2Kb2WbmMLSkfvdr1KxRIFYOpbY0Jhn7CfLSUDzL8arQ==",
-            "license": "MIT",
-            "peer": true
+            "license": "MIT"
         },
         "node_modules/@lezer/highlight": {
             "version": "1.2.3",
             "resolved": "https://registry.npmjs.org/@lezer/highlight/-/highlight-1.2.3.tgz",
             "integrity": "sha512-qXdH7UqTvGfdVBINrgKhDsVTJTxactNNxLk7+UMwZhU13lMHaOBlJe9Vqp907ya56Y3+ed2tlqzys7jDkTmW0g==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@lezer/common": "^1.3.0"
             }
@@ -3098,7 +3092,6 @@
             "integrity": "sha512-TmzrdDHUKtKG7x1CqYuMIHjfXMqS85EwIF3Of/LV+laBtDhKrgioPJW82dIOJ44w1nryH8Yeh1Hdx9O+cPWfVw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "ts-dedent": "^2.0.0",
                 "type-fest": "~2.19"
@@ -3210,7 +3203,6 @@
             "integrity": "sha512-Y1Cs7hhTc+a5E9Va/xwKlAJoariQyHY+5zBgCZg4PFWNYQ1nMN9sjK1zhw1gK69DuqVP++sht/1GZg1aRwmAXQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@sveltejs/vite-plugin-svelte-inspector": "^4.0.1",
                 "debug": "^4.4.1",
@@ -3251,7 +3243,6 @@
             "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@babel/code-frame": "^7.10.4",
                 "@babel/runtime": "^7.12.5",
@@ -3529,7 +3520,6 @@
             "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/estree": "*",
                 "@types/json-schema": "*"
@@ -3725,7 +3715,6 @@
             "integrity": "sha512-QoiaXANRkSXK6p0Duvt56W208du4P9Uye9hWLWgGMDTEoKPhuenzNcC4vGUmrNkiOKTlIrBoyNQYNpSwfEZXSg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "undici-types": "~7.16.0"
             }
@@ -3924,7 +3913,6 @@
             "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@typescript-eslint/scope-manager": "8.46.2",
                 "@typescript-eslint/types": "8.46.2",
@@ -4916,7 +4904,6 @@
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
             "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -5377,7 +5364,6 @@
             "integrity": "sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==",
             "dev": true,
             "license": "MPL-2.0",
-            "peer": true,
             "engines": {
                 "node": ">=4"
             }
@@ -5670,7 +5656,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "baseline-browser-mapping": "^2.8.19",
                 "caniuse-lite": "^1.0.30001751",
@@ -6483,6 +6468,7 @@
             "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "dependencies": {
                 "is-what": "^3.14.1"
             },
@@ -6793,7 +6779,8 @@
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
             "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/dashdash": {
             "version": "1.14.1",
@@ -7019,8 +7006,7 @@
             "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1508733.tgz",
             "integrity": "sha512-QJ1R5gtck6nDcdM+nlsaJXcelPEI7ZxSMw1ujHpO1c4+9l+Nue5qlebi9xO1Z2MGr92bFOQTW7/rrheh5hHxDg==",
             "dev": true,
-            "license": "BSD-3-Clause",
-            "peer": true
+            "license": "BSD-3-Clause"
         },
         "node_modules/diff": {
             "version": "5.2.0",
@@ -7462,7 +7448,6 @@
             "dev": true,
             "hasInstallScript": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "esbuild": "bin/esbuild"
             },
@@ -7580,7 +7565,6 @@
             "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.8.0",
                 "@eslint-community/regexpp": "^4.12.1",
@@ -7641,7 +7625,6 @@
             "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -8882,7 +8865,6 @@
             "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
             "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
             "license": "BSD-3-Clause",
-            "peer": true,
             "engines": {
                 "node": ">=12.0.0"
             }
@@ -9141,6 +9123,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "bin": {
                 "image-size": "bin/image-size.js"
             },
@@ -9601,7 +9584,8 @@
             "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
             "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
             "dev": true,
-            "license": "MIT"
+            "license": "MIT",
+            "peer": true
         },
         "node_modules/is-windows": {
             "version": "1.0.2",
@@ -10117,6 +10101,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "dependencies": {
                 "prr": "~1.0.1"
             },
@@ -10131,6 +10116,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "dependencies": {
                 "pify": "^4.0.1",
                 "semver": "^5.6.0"
@@ -10146,6 +10132,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "bin": {
                 "mime": "cli.js"
             },
@@ -10160,6 +10147,7 @@
             "dev": true,
             "license": "ISC",
             "optional": true,
+            "peer": true,
             "bin": {
                 "semver": "bin/semver"
             }
@@ -10171,6 +10159,7 @@
             "dev": true,
             "license": "BSD-3-Clause",
             "optional": true,
+            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -10929,6 +10918,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "dependencies": {
                 "iconv-lite": "^0.6.3",
                 "sax": "^1.2.4"
@@ -10947,6 +10937,7 @@
             "dev": true,
             "license": "MIT",
             "optional": true,
+            "peer": true,
             "dependencies": {
                 "safer-buffer": ">= 2.1.2 < 3.0.0"
             },
@@ -11486,6 +11477,7 @@
             "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
             "dev": true,
             "license": "MIT",
+            "peer": true,
             "engines": {
                 "node": ">= 0.10"
             }
@@ -11835,7 +11827,6 @@
                 }
             ],
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "nanoid": "^3.3.11",
                 "picocolors": "^1.1.1",
@@ -12495,7 +12486,6 @@
             "integrity": "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "cssesc": "^3.0.0",
                 "util-deprecate": "^1.0.2"
@@ -12550,7 +12540,6 @@
             "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "posthtml-parser": "^0.11.0",
                 "posthtml-render": "^3.0.0"
@@ -12703,7 +12692,6 @@
             "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "bin": {
                 "prettier": "bin/prettier.cjs"
             },
@@ -12879,7 +12867,6 @@
             "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.25.4.tgz",
             "integrity": "sha512-PIM7E43PBxKce8OQeezAs9j4TP+5yDpZVbuurd1h5phUxEKIu+G2a+EUZzIC5nS1mJktDJWzbqS23n1tsAf5QA==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "orderedmap": "^2.0.0"
             }
@@ -12909,7 +12896,6 @@
             "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.4.tgz",
             "integrity": "sha512-6jiYHH2CIGbCfnxdHbXZ12gySFY/fz/ulZE333G6bPqIZ4F+TXo9ifiR86nAHpWnfoNjOb3o5ESi7J8Uz1jXHw==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "prosemirror-model": "^1.0.0",
                 "prosemirror-transform": "^1.0.0",
@@ -12940,7 +12926,6 @@
             "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.41.3.tgz",
             "integrity": "sha512-SqMiYMUQNNBP9kfPhLO8WXEk/fon47vc52FQsUiJzTBuyjKgEcoAwMyF04eQ4WZ2ArMn7+ReypYL60aKngbACQ==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "prosemirror-model": "^1.20.0",
                 "prosemirror-state": "^1.0.0",
@@ -13198,7 +13183,6 @@
             "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -13209,7 +13193,6 @@
             "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "scheduler": "^0.27.0"
             },
@@ -13679,7 +13662,6 @@
             "integrity": "sha512-3GuObel8h7Kqdjt0gxkEzaifHTqLVW56Y/bjN7PSQtkKr0w3V/QYSdt6QWYtd7A1xUtYQigtdUfgj1RvWVtorw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/estree": "1.0.8"
             },
@@ -14624,7 +14606,6 @@
             "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "chokidar": "^4.0.0",
                 "immutable": "^5.0.2",
@@ -14710,7 +14691,6 @@
             "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "fast-deep-equal": "^3.1.3",
                 "fast-uri": "^3.0.1",
@@ -15281,7 +15261,6 @@
             "integrity": "sha512-es7uDdEwRVVUAt7XLAZZ1hicOq9r4ov5NFeFPpa2YEyAsyHYOCr0CTlHBfslWG6D5EVNWK3kVIIuW8GHB6hEig==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@storybook/global": "^5.0.0",
                 "@testing-library/jest-dom": "^6.6.3",
@@ -15755,7 +15734,6 @@
             "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.42.2.tgz",
             "integrity": "sha512-iSry5jsBHispVczyt9UrBX/1qu3HQ/UyKPAIjqlvlu3o/eUvc+kpyMyRS2O4HLLx4MvLurLGIUOyyP11pyD59g==",
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@jridgewell/remapping": "^2.3.4",
                 "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -16220,7 +16198,6 @@
             "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
             "dev": true,
             "license": "BSD-2-Clause",
-            "peer": true,
             "dependencies": {
                 "@jridgewell/source-map": "^0.3.3",
                 "acorn": "^8.15.0",
@@ -16567,7 +16544,6 @@
             "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
             "dev": true,
             "license": "Apache-2.0",
-            "peer": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -16803,7 +16779,6 @@
             "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "esbuild": "^0.25.0",
                 "fdir": "^6.4.4",
@@ -16922,7 +16897,6 @@
             "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/chai": "^5.2.2",
                 "@vitest/expect": "3.2.4",
@@ -17061,7 +17035,6 @@
             "integrity": "sha512-7h/weGm9d/ywQ6qzJ+Xy+r9n/3qgp/thalBbpOi5i223dPXKi04IBtqPN9nTd+jBc7QKfvDbaBnFipYp4sJAUQ==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@types/eslint-scope": "^3.7.7",
                 "@types/estree": "^1.0.8",
@@ -17111,7 +17084,6 @@
             "integrity": "sha512-MfwFQ6SfwinsUVi0rNJm7rHZ31GyTcpVE5pgVA3hwFRb7COD4TzjUUwhGWKfO50+xdc2MQPuEBBJoqIMGt3JDw==",
             "dev": true,
             "license": "MIT",
-            "peer": true,
             "dependencies": {
                 "@discoveryjs/json-ext": "^0.6.1",
                 "@webpack-cli/configtest": "^3.0.1",
diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts
index 6693e7ecef..39d01d1ee6 100644
--- a/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts
+++ b/packages/stacks-classic/lib/components/empty-state/empty-state.a11y.test.ts
@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
+import { SpotEmpty } from "@stackoverflow/stacks-icons/spots";
 import { runA11yTests } from "../../test/a11y-test-utils";
 import "../../index";
 
@@ -7,7 +7,9 @@ describe("empty-state", () => {
     runA11yTests({
         baseClass: "s-empty-state",
         children: {
-            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+            default: `${SpotEmpty}
+            <h4 class="s-empty-state--title">No questions match your result.</h4>
+            <p>This is a wonderful empty state component.</p>`,
         },
         template: ({ component, testid }) => html`
             <div class="ws3 p16" data-testid="${testid}">${component}</div>
diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.less b/packages/stacks-classic/lib/components/empty-state/empty-state.less
index c163f4476c..8829b68c7d 100644
--- a/packages/stacks-classic/lib/components/empty-state/empty-state.less
+++ b/packages/stacks-classic/lib/components/empty-state/empty-state.less
@@ -1,15 +1,26 @@
 .s-empty-state {
     // CHILD ELEMENTS
     p {
-        strong {
-            color: var(--fc-dark);
-        }
+        color: var(--black-400);
+        margin-bottom: var(--su32);
+    }
+
+    &--title {
+        font-weight: 600;
+        font-size: var(--fs-body3);
+        margin-bottom: var(--su8);
+        color: var(--black-400);
+    }
+
+    .svg-spot {
+        margin-bottom: var(--su24);
+    }
 
-        font-size: var(--fs-body1);
-        margin-bottom: var(--su12);
+    // Remove margin from <p> if there are no buttons
+    &:last-child {
+        margin-bottom: 0;
     }
 
-    color: var(--fc-light);
     text-align: center;
     margin-left: auto;
     margin-right: auto;
diff --git a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts
index 257c8b03ed..d314d7444e 100644
--- a/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts
+++ b/packages/stacks-classic/lib/components/empty-state/empty-state.visual.test.ts
@@ -1,5 +1,5 @@
 import { html } from "@open-wc/testing";
-import { SpotEmptyXL } from "@stackoverflow/stacks-icons-legacy";
+import { SpotEmpty } from "@stackoverflow/stacks-icons/spots";
 import { runVisualTests } from "../../test/visual-test-utils";
 import "../../index";
 
@@ -7,7 +7,11 @@ describe("empty-state", () => {
     runVisualTests({
         baseClass: "s-empty-state",
         children: {
-            default: `${SpotEmptyXL}<p class="mt24"><strong>Hello!</strong> This is a wonderful empty state component.</p>`,
+            "default": `${SpotEmpty.replace("svg-spot", "svg-spot native")}
+            <p>This is a wonderful empty state component.</p>`,
+            "with-title": `${SpotEmpty.replace("svg-spot", "svg-spot native")}
+            <h4 class="s-empty-state--title">Amazing title for this empty state.</h4>
+            <p>This is a wonderful empty state component.</p>`,
         },
         template: ({ component, testid }) => html`
             <div class="ws3 p16" data-testid="${testid}">${component}</div>
diff --git a/packages/stacks-classic/lib/components/modal/modal.test.ts b/packages/stacks-classic/lib/components/modal/modal.test.ts
index 8fef533a7b..ea9a3b3532 100644
--- a/packages/stacks-classic/lib/components/modal/modal.test.ts
+++ b/packages/stacks-classic/lib/components/modal/modal.test.ts
@@ -139,8 +139,9 @@ describe("modal", () => {
 
         await user.click(trigger);
         expect(modal).to.be.visible;
-
-        await waitFor(() => expect(initialFocusEl).to.have.focus);
+        await waitFor(() => expect(initialFocusEl).to.have.focus, {
+            timeout: 20000,
+        });
     });
 
     it("should focus on the first focusable element when modal is shown and no initialFocus is specified", async () => {
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico
new file mode 100644
index 0000000000..e7a02f7e9d
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f1e44944124c52ff9e2ac166218ced4ea01fb24f5548e2dcdbc2ecc55c21215f
+size 8811
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico
new file mode 100644
index 0000000000..456a396b44
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dddbb78b1154e0fd67da24fd963a9a478df6a1ea7ab7aa93f60bb90e618d5fdf
+size 8804
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico
index a34c39f76e..655ea4f81b 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b5b8aec3ee47957bfb3258c09c7d837479815fcc2636b1a510b82d6891e8fd6b
-size 10141
+oid sha256:dda72730120d7efa55fc8d8bced11fa70d6a09e950de74ded770eb4a20344e6b
+size 4970
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico
new file mode 100644
index 0000000000..3096ac8b9e
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:acf1c05eba84b81f31affe9746c1f1117956659dbdd8b9e7649cd0cf293d8216
+size 8795
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico
new file mode 100644
index 0000000000..476d05430f
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8033adaacd353f6928864f6213b05897ec5257289840ee88bc41b7f816d9f126
+size 8786
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico
index 8bf3bda3ea..7b416fc1be 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9e8e491ce3392d5a7f98fe395919e8472e651c2a0d6687df4964715c5df2520a
-size 10449
+oid sha256:f6bb4127c9fe2c530c1e3b4a277e939f6de501d3cc0244d0369473a667718d18
+size 4962
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico
new file mode 100644
index 0000000000..ec761f5360
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:106377ab17a76741a26125107a0423a4a5d4303888a1e815ed4e6a1932bb0859
+size 8789
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico
new file mode 100644
index 0000000000..6d53500c16
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d355bd17a16fae60ad90be6c6178153ea1d87c80210e73931129616aef8d9132
+size 8782
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico
index 9779904eb7..78b905a9f2 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-highcontrast-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:304f778a1b49536e633137d8ebac8e334ce660aa5fcc7781824f44f6b669b545
-size 9852
+oid sha256:7bfeb3d6a5c171a8d0d762263b1c2414949c52b76745b3220fdd70c8689e79db
+size 4912
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico
new file mode 100644
index 0000000000..1ba0906471
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ff618adb5b8327a4a29073249b70b8c628bc392ec8c8be72713e6addbad2d649
+size 8595
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico
new file mode 100644
index 0000000000..9a5bd9fb79
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2720347a9599ce2c4b4f7f07a56e3dab10bfe0646b2e2d9f66dad927013880aa
+size 8588
diff --git a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico
index e20826f3dc..72827574f7 100644
--- a/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico
+++ b/packages/stacks-classic/screenshots/Chromium/baseline/s-empty-state-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a89e77df3a1d709d751f94ebd59c0e439a736e201bc5c2cff2872bdb72d3afac
-size 9947
+oid sha256:4692877f28bbc9fa042e05a85f8361f1a28e8569eddba4c9ba11c8d60fb4997e
+size 4844
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico
new file mode 100644
index 0000000000..290efbc349
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bfda345117d0322843da191a69356ed40a60f2c86e7ebd22664b0a06f667f8f2
+size 12538
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico
new file mode 100644
index 0000000000..e7f5b1bf4c
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f4fb1ba22e07d2c6f253e21852d3465ae92e9938997e92177bc4b3880ed31488
+size 12565
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico
index 36d23e786a..44a84cb023 100644
--- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ea7b4378ca813105adc1de4585ca88d62aa2c6d85f07ad7c4fac583ae5d2e63
-size 14559
+oid sha256:037b1502f9a69c255871b19cb0d8a63f8050cf826bbf7b15b817bfa1534476b0
+size 7681
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico
new file mode 100644
index 0000000000..51c7c09c15
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:895e62747b0711ff16abf4a03a2f518611252fb18e124898007fd4c6cab52808
+size 12587
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico
new file mode 100644
index 0000000000..9cc3991640
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8fc5ef304dd47f1ff6a2e3dbf86ea6060552b03108f06fe56a865ce2e22fb848
+size 12613
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico
index e8d2bf4e28..1e5edf2486 100644
--- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ffb32312369a2acab1aad1a79464400e6d957778b02d6d2368aaf26f3abc3830
-size 14607
+oid sha256:6984bb7c7acc7d900572926d77444909815670e884b2866f78990ab669df2daa
+size 7747
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico
new file mode 100644
index 0000000000..922efdc23c
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b32e88072db1e29476df89fc603c6d356e12b231e19618773f73a27a66036435
+size 12268
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico
new file mode 100644
index 0000000000..01788e8030
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5908f7e495cb1d410b154749065448f4b5aa543b129e75c4f5f4c5b15b081714
+size 12294
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico
index d0aa78ee1d..15ffea9273 100644
--- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-highcontrast-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d9fa9ca91a903c6af5830a07e592da8848916a05d66901ca2fbf0c63bb9203d1
-size 14326
+oid sha256:babf286cdfaed4239fa2bd9a622a22e00f81d83912cfb91ebb4ba5d740d8d773
+size 7608
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico
new file mode 100644
index 0000000000..856823b3a7
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0fb5ed282c442f215e566167b0c51082d93e28d05f60d4d730afe076b4af8387
+size 12129
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico
new file mode 100644
index 0000000000..79c9fedef2
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:82682a993a09de13aa4b29e3c4e93be29a9c71706f70a509576cf4c5256239f5
+size 12155
diff --git a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico
index e65057473d..def7121f50 100644
--- a/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico
+++ b/packages/stacks-classic/screenshots/Firefox/baseline/s-empty-state-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f7a3461edde26a19c2db0cb8f48fcd7a11f73cacef071915b1e98a9979546690
-size 14135
+oid sha256:b3e4a5d663e048339750521c1ee12db9d49c979c86e34860622019a985458646
+size 7543
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico
new file mode 100644
index 0000000000..e43bc62777
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c44c854487589df61d9733ffc6fb81723821de9aee0573f727b3daa47aaed511
+size 10535
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico
new file mode 100644
index 0000000000..9dc9949c10
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:45de364e970f768f4208529f191f8efdc6095b7c8f035f5372e5bc4d85ac528d
+size 10527
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico
index 8617cecd72..652317eaa8 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f9575a575df5e335753b7ca26e80a9cdbb6cafb37910aea661f0fef3c675c646
-size 12124
+oid sha256:69ec21b24df946f3954c661b09076814bcfe33315d413e7f435fba4fa3c56c06
+size 6012
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico
new file mode 100644
index 0000000000..9ef220430d
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3443cda8cde6fbcd37238d132310798e8376158f8f3f04713a9e95245ee6ff8f
+size 10516
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico
new file mode 100644
index 0000000000..19c9044442
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b518cbbfa5232fae6df1bcb7c9d2e8a4bb55e63c6a586aa5d0d417e859ce4cda
+size 10507
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico
index 7f3a1d48fb..6fc50d752a 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-dark.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f32692921567602bddc548d13b2c303d2c16289c298571364e8d3a7dde23dff0
-size 12413
+oid sha256:bd13e509147261e1e98247d8a97144c692528b28d348dab6449944ccfd1e9499
+size 5983
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico
new file mode 100644
index 0000000000..49306713b3
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7181f9fd8ac664fbf9263df5c7274593d40f140a031605fe3a59d0e13540c52c
+size 10647
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico
new file mode 100644
index 0000000000..caaf8cd918
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:77c07d37d7fae93cbd5bd0a08f192f559e150d8a0fc27b593666187f07a16d78
+size 10638
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico
index 17322036c9..7ccb8b471f 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-highcontrast-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8b8ceddbd32608a07fdac977291f511fcbf6b493cbafbcd3108522c20c341855
-size 12216
+oid sha256:4abc5ef6b29d547d085f881b0099f4136525c829696d9a81b7634909216f8d02
+size 6012
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico
new file mode 100644
index 0000000000..db6ef35604
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-with-title.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0fefd26d34d0dd0f792c5f42e24319f9161e4d9bdfdfcfcd2210d1095168d063
+size 10382
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico
new file mode 100644
index 0000000000..786e5c301c
--- /dev/null
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light-withTitle.ico
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8c45db21dc51a5905a22880ab75ebe397af7ecd315b3cf6c694fa36d6b5c5c86
+size 10372
diff --git a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico
index 52f1461b9f..f90c1a6079 100644
--- a/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico
+++ b/packages/stacks-classic/screenshots/Webkit/baseline/s-empty-state-light.ico
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:18ed145cc87bd5c25eada1c06f126488517e04b4a8ea11521f48d13c8d06305f
-size 12084
+oid sha256:f0172e907c70b655f4f490ebe7c88c6868450a4a56acec8b7c1b4c0023de3564
+size 5921
diff --git a/packages/stacks-docs/_data/site-navigation.json b/packages/stacks-docs/_data/site-navigation.json
index 9025e7277c..15f3ec9b47 100644
--- a/packages/stacks-docs/_data/site-navigation.json
+++ b/packages/stacks-docs/_data/site-navigation.json
@@ -254,7 +254,8 @@
             },
             {
               "title": "Empty states",
-              "url": "/product/components/empty-states/"
+              "url": "/product/components/empty-states/",
+              "new": true
             },
             {
               "title": "Expandable",
diff --git a/packages/stacks-docs/product/components/empty-states.html b/packages/stacks-docs/product/components/empty-states.html
index 0ff8233f72..87d8702155 100644
--- a/packages/stacks-docs/product/components/empty-states.html
+++ b/packages/stacks-docs/product/components/empty-states.html
@@ -1,95 +1,76 @@
 ---
 layout: page
 title: Empty states
+svelte: https://beta.svelte.stackoverflow.design/?path=/docs/components-emptystate--docs
+figma: https://www.figma.com/design/do4Ug0Yws8xCfRjHe9cJfZ/Project-SHINE---Product-UI?node-id=610-18807&p=f&m=dev
 description: Empty states are used when there is no data to show. Ideally they orient the user by providing feedback based on the the user’s last interaction or communicate the benefits of a feature. When appropriate, they should explain the next steps the user should take and provide guidance with a clear call-to-action.
 tags: components
 ---
 <section class="stacks-section">
-    {% header "h2", "No data" %}
+    {% header "h2", "No data or results" %}
     <p class="stacks-copy">
-        Used when a user hasn’t interacted with a feature yet.
+        Typical use-case for an empty state is when a feature has no data or a search/filter operation yields no results.
     </p>
-    {% header "h3", "No data actionable" %}
+    {% header "h3", "Actionable" %}
     <p class="stacks-copy">
-        If the user can take an action to fix the situation, it's best to draw attention to it, explain next steps, and provide a call-to-action.
+        If the user is able to address the situation resulting in an empty state, it is appropriate to include a button for them to do so.
     </p>
     <div class="stacks-preview">
 {% highlight html %}
 <div class="s-empty-state wmx4 p48">
-    @Svg.Spot.EmptyXL.With("mb24")
-    <p>Why is this blank? Explain it.</p>
-    <a class="s-btn s-btn__filled">Call to action</a>
+    @Svg.Spot.Empty.With("native")
+    <h4 class="s-empty-state--title">No questions match your result.</h4>
+    <p>Try refining your search term or trying something more general.</p>
+    <button class="s-btn s-btn__tonal">Clear filters</a>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="s-empty-state wmx4 p48">
-                {% spot, "EmptyXL", "mb24" %}
-                <p>We haven’t received any data yet. Have you connected your Stack Overflow account?</p>
-                <a class="s-btn s-btn__filled">Connect my account</a>
+                {% spot, "Empty", "native" %}
+                <h4 class="s-empty-state--title">No questions match your result.</h4>
+                <p>Try refining your search term or trying something more general.</p>
+                <button class="s-btn s-btn__tonal">Clear filters</button>
             </div>
         </div>
     </div>
-    {% header "h3", "No data non-actionable" %}
+
+    {% header "h3", "Non-actionable" %}
     <p class="stacks-copy">
-        If the user can’t take an action to fix the situation, it’s more appropriate to set expectations.
+        If the user can’t take an action to fix the situation, it’s appropriate to set expectations. 
     </p>
     <div class="stacks-preview">
 {% highlight html %}
 <div class="s-empty-state wmx4 p48">
-    @Svg.Spot.EmptyXL.With("mb24")
-    <p>Why is this blank? Explain it.</p>
+    @Svg.Spot.Empty.With("native")
+    <h4 class="s-empty-state--title">User trends not ready</h4>
+    <p>Please check back in a few days.</p>
 </div>
 {% endhighlight %}
         <div class="stacks-preview--example">
             <div class="s-empty-state wmx4 p48">
-                {% spot, "EmptyXL", "mb24" %}
-                <p>There’s no data associated with your account yet. Please check back tomorrow.</p>
-            </div>
-        </div>
-    </div>
-</section>
-<section class="stacks-section">
-    {% header "h2", "No results" %}
-    <p class="stacks-copy">
-        When someone performs an action that returns nothing, a blank state can explain what happened and help get someone back on track.
-    </p>
-    {% header "h3", "No results actionable" %}
-    <p class="stacks-copy">
-        If the user can take an action to fix the situation, it’s best to draw attention to it and provide a call-to-action.
-    </p>
-    <div class="stacks-preview">
-{% highlight html %}
-<div class="s-empty-state wmx4 p48">
-    @Svg.Spot.EmptyXL.With("mb24")
-    <p>Why is this blank? Explain it.</p>
-    <a class="s-btn s-btn__filled">Call to action</a>
-</div>
-{% endhighlight %}
-        <div class="stacks-preview--example bg-black-100">
-            <div class="s-empty-state wmx4 p48">
-                {% spot, "EmptyXL", "mb24" %}
-                <p>We couldn’t find any tags matching <span class="s-tag d-inline-block">stacks-1-0-0</span>. It might not exist yet. Would you like to create it?</p>
-                <a href="#" class="s-btn s-btn__filled">Create this tag</a>
+                {% spot, "Empty", "native" %}
+                <h4 class="s-empty-state--title">User trends not ready</h4>
+                <p>Please check back in a few days.</p>
             </div>
         </div>
     </div>
 
-    {% header "h3", "No results non-actionable" %}
+    {% header "h3", "Minimal" %}
     <p class="stacks-copy">
-        If the user can’t take an action to fix the situation, it’s more appropriate to set expectations.
+        If desired, both the title and call-to-action may be omitted for a minimal look.
     </p>
     <div class="stacks-preview">
 {% highlight html %}
 <div class="s-empty-state wmx4 p48">
-    @Svg.Spot.EmptyXL.With("mb24")
-    <p>Why is this blank? Explain it.</p>
+    @Svg.Spot.Empty.With("native")
+    <p>There’s no data associated with <a href="#" class="s-link s-link__underlined">this account</a>.</p>
 </div>
 {% endhighlight %}
-        <div class="stacks-preview--example bg-black-100">
+        <div class="stacks-preview--example">
             <div class="s-empty-state wmx4 p48">
-                {% spot, "EmptyXL", "mb24" %}
-                <p>We couldn’t match users for <strong>Namey McUser</strong>. Try refining your search or trying something more general.</p>
+                {% spot, "Empty", "native" %}
+                <p>There’s no data associated with <a href="#" class="s-link s-link__underlined">this account</a>.</p>
             </div>
         </div>
     </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/packages/stacks-docs/product/components/textarea.html b/packages/stacks-docs/product/components/textarea.html
index f56821a670..43b82e37a0 100644
--- a/packages/stacks-docs/product/components/textarea.html
+++ b/packages/stacks-docs/product/components/textarea.html
@@ -13,7 +13,7 @@
 <div class="d-flex fd-column gy4">
     <label class="s-label" for="example-item">Question body</label>
     <div class="d-flex ps-relative">
-        <textarea class="s-textarea" id="example-item" placeholder="…"></textarea>
+        <textarea class="s-textarea w100" id="example-item" placeholder="…"></textarea>
     </div>
 </div>
 {% endhighlight %}
@@ -21,7 +21,7 @@
             <div class="d-flex gy4 fd-column">
                 <label class="s-label" for="example-item7">Question body</label>
                 <div class="d-flex ps-relative">
-                    <textarea class="s-textarea ps-relative" id="example-item7" placeholder="e.g. The Stack Overflow glyph used to have 6 bars, but now…"></textarea>
+                    <textarea class="s-textarea ps-relative w100" id="example-item7" placeholder="e.g. The Stack Overflow glyph used to have 6 bars, but now…"></textarea>
                 </div>
             </div>
         </div>
@@ -72,7 +72,7 @@
 <div class="d-flex gy4 fd-column has-warning">
     <label class="s-label" for="example-warning">Description</label>
     <div class="d-flex ps-relative">
-        <textarea class="s-textarea" id="example-warning" placeholder="Please describe your problem"></textarea>
+        <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
         @Svg.Alert.With("s-input-icon")
     </div>
     <p class="s-input-message mb0">Consider entering a description to help us better help you.</p>
@@ -82,7 +82,7 @@
             <div class="d-flex gy4 fd-column has-warning">
                 <label class="s-label" for="example-warning">Description</label>
                 <div class="d-flex ps-relative">
-                    <textarea class="s-textarea" id="example-warning" placeholder="Please describe your problem"></textarea>
+                    <textarea class="s-textarea w100" id="example-warning" placeholder="Please describe your problem"></textarea>
                     {% icon "Alert", "s-input-icon" %}
                 </div>
                 <p class="s-input-message mb0">Consider entering a description to help us better help you.</p>
@@ -96,7 +96,7 @@
 <div class="d-flex gy4 fd-column has-error">
     <label class="s-label" for="example-success">Description</label>
     <div class="d-flex ps-relative">
-        <textarea class="s-textarea" id="example-success" placeholder="Please describe your problem"></textarea>
+        <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem"></textarea>
         @Svg.AlertCircle.With("s-input-icon")
     </div>
     <p class="s-input-message mb0">A description must be provided.</p>
@@ -106,7 +106,7 @@
             <div class="d-flex gy4 fd-column has-error">
                 <label class="s-label" for="example-success1">Description</label>
                 <div class="d-flex ps-relative">
-                    <textarea class="s-textarea" id="example-success1" placeholder="Please describe your problem"></textarea>
+                    <textarea class="s-textarea w100" id="example-success1" placeholder="Please describe your problem"></textarea>
                     {% icon "AlertCircle", "s-input-icon" %}
                 </div>
                 <p class="s-input-message mb0">A description must be provided.</p>
@@ -120,7 +120,7 @@
 <div class="d-flex gy4 fd-column has-success">
     <label class="s-label" for="example-success">Description</label>
     <div class="d-flex ps-relative">
-        <textarea class="s-textarea" id="example-success" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
+        <textarea class="s-textarea w100" id="example-success" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
         @Svg.Checkmark.With("s-input-icon")
     </div>
     <p class="s-input-message mb0">Thanks for providing a description.</p>
@@ -130,7 +130,7 @@
             <div class="d-flex gy4 fd-column has-success">
                 <label class="s-label" for="example-success2">Description</label>
                 <div class="d-flex ps-relative">
-                    <textarea class="s-textarea" id="example-success2" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
+                    <textarea class="s-textarea w100" id="example-success2" placeholder="Please describe your problem">How do you know your company is ready for a design system? How do you implement one without too many pain points? How do you efficiently maintain one once it’s built?</textarea>
                     {% icon "Check", "s-input-icon" %}
                 </div>
                 <p class="s-input-message mb0">Thanks for providing a description.</p>
@@ -161,7 +161,7 @@
                         <td>{% if item.class == "N/A" %}<em class="fc-light">{{ item.class }}</em>{% else %}<code class="stacks-code">.{{ item.class }}</code>{% endif %}</td>
                         <td>
                             <div class="d-flex ps-relative">
-                                <textarea class="s-textarea {% if item.class != 'N/A' %}{{ item.class }}{% endif %}" aria-label="demo textarea">Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions.</textarea>
+                                <textarea class="s-textarea w100 {% if item.class != 'N/A' %}{{ item.class }}{% endif %}" aria-label="demo textarea">Not sure what to ask? Recurring questions, onboarding procedures, local setups, and FAQs all make for useful questions.</textarea>
                             </div>
                         </td>
                     </tr>
diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte
new file mode 100644
index 0000000000..1212d2202a
--- /dev/null
+++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.stories.svelte
@@ -0,0 +1,34 @@
+<script lang="ts" module>
+    import { defineMeta } from "@storybook/addon-svelte-csf";
+    import EmptyState from "./EmptyState.svelte";
+    import Link from "../Link/Link.svelte";
+    import Button from "../Button/Button.svelte";
+
+    const { Story } = defineMeta({
+        title: "Components/EmptyState",
+        component: EmptyState,
+    });
+</script>
+
+<Story name="Base" args={{ title: "No items found" }}>
+    {#snippet template(args)}
+        <EmptyState {...args}>
+            {#snippet description()}
+                There are no items to display at this time.
+            {/snippet}
+            {#snippet actions()}
+                <Button variant="tonal">Add New Item</Button>
+            {/snippet}
+        </EmptyState>
+    {/snippet}
+</Story>
+
+<Story name="Minimal">
+    {#snippet template(args)}
+        <EmptyState {...args}>
+            {#snippet description()}
+                No data found. <Link href="#" underlined>Check back</Link> later.
+            {/snippet}
+        </EmptyState>
+    {/snippet}
+</Story>
diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte
new file mode 100644
index 0000000000..eeeab4b3db
--- /dev/null
+++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    import Icon from "../Icon/Icon.svelte";
+    import type { Snippet } from "svelte";
+    import type { ClassValue } from "svelte/elements";
+    import { SpotEmpty } from "@stackoverflow/stacks-icons/spots";
+    interface Props {
+        /**
+         * The optional title to be shown
+         */
+        title?: string;
+
+        /**
+         * Html tag to use for the title
+         */
+        titleTag?: string;
+
+        /**
+         * Additional CSS classes added to the underlying outer HTML element
+         */
+        class?: ClassValue;
+
+        /**
+         * Snippet containing brief text
+         * explaining the empty state
+         */
+        description: Snippet;
+
+        /**
+         * Optional snippet for actionable buttons
+         */
+        actions?: Snippet;
+    }
+
+    let {
+        title,
+        titleTag = "h4",
+        class: className,
+        description,
+        actions,
+    }: Props = $props();
+</script>
+
+<div class={["s-empty-state", className]}>
+    <Icon src={SpotEmpty} native />
+    {#if title}
+        <svelte:element this={titleTag} class="s-empty-state--title">
+            {title}
+        </svelte:element>
+    {/if}
+    <p>{@render description()}</p>
+    {#if actions}
+        {@render actions()}
+    {/if}
+</div>
diff --git a/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts
new file mode 100644
index 0000000000..9a9631ab0a
--- /dev/null
+++ b/packages/stacks-svelte/src/components/EmptyState/EmptyState.test.ts
@@ -0,0 +1,46 @@
+import { expect } from "@open-wc/testing";
+import { render, screen } from "@testing-library/svelte";
+import { createRawSnippet } from "svelte";
+import EmptyState from "./EmptyState.svelte";
+
+describe("EmptyState", () => {
+    it("should render an empty state with the description content", () => {
+        render(EmptyState, {
+            description: createRawSnippet(() => ({
+                render: () =>
+                    "<span>There are no items to display at this time.</span>",
+            })),
+        });
+        expect(screen.getByText("There are no items to display at this time."))
+            .to.exist;
+    });
+
+    it("should render an empty state with the description and call-to-action content", () => {
+        render(EmptyState, {
+            description: createRawSnippet(() => ({
+                render: () =>
+                    "<span>There are no items to display at this time.</span>",
+            })),
+            actions: createRawSnippet(() => ({
+                render: () =>
+                    '<button class="s-btn s-btn__tonal">Click Me!</button>',
+            })),
+        });
+        expect(screen.getByText("There are no items to display at this time."))
+            .to.exist;
+        expect(screen.getByRole("button")).to.exist;
+    });
+
+    it("should render an empty state with the description and title content", () => {
+        render(EmptyState, {
+            description: createRawSnippet(() => ({
+                render: () =>
+                    "<span>There are no items to display at this time.</span>",
+            })),
+            title: "No results found",
+        });
+        expect(screen.getByText("There are no items to display at this time."))
+            .to.exist;
+        expect(screen.getByText("No results found")).to.exist;
+    });
+});
diff --git a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte
index d7d8dd8da7..bdc7025017 100644
--- a/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte
+++ b/packages/stacks-svelte/src/components/ExpandingInput/ExpandingInput.svelte
@@ -3,28 +3,35 @@
 </script>
 
 <script lang="ts">
-    /**
-     * The id to pair with a label
-     * @type {string} Id
-     */
-    export let id: string;
-
-    /**
-     * The input's variant
-     * @type {"default" | "chat"} Variant
-     */
-    export let variant: Variant = "default";
-
-    /**
-     * Initial value to pass to input
-     */
-    export let value = "";
+    interface Props {
+        /**
+         * The id to pair with a label
+         * @type {string} Id
+         */
+        id: string;
+
+        /**
+         * The input's variant
+         * @type {"default" | "chat"} Variant
+         */
+        variant?: Variant;
+
+        /**
+         * Initial value to pass to input
+         */
+        value?: string;
+
+        /**
+         * Additional input attributes like `placeholder`
+         */
+        [key: string]: unknown;
+    }
 
-    $: classes = getClasses(variant);
+    let { id, variant = "default", value = "", ...rest }: Props = $props();
 
     const getClasses = (variant: string) => {
-        let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg";
-        let textarea = `${common} ps-absolute i0 h100`;
+        let common = "s-textarea ws-pre-wrap break-word hmx3 lh-lg h100";
+        let textarea = `${common} ps-absolute i0`;
         let grower = `${common} v-hidden overflow-hidden`;
 
         if (variant === "chat") {
@@ -35,17 +42,11 @@
 
         return { textarea, grower };
     };
+    let classes = $derived(getClasses(variant));
 </script>
 
 <div class="d-flex ai-center ps-relative w100">
-    <textarea
-        class={classes.textarea}
-        rows="1"
-        bind:value
-        {id}
-        {...$$restProps}
-        on:input
-        on:keydown
+    <textarea class={classes.textarea} rows="1" bind:value {id} {...rest}
     ></textarea>
     <pre class={classes.grower} aria-hidden="true">{value}<br /></pre>
 </div>
diff --git a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
index 3bc507526a..ced266bec4 100644
--- a/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
+++ b/packages/stacks-svelte/src/components/PostSummary/PostSummary.svelte
@@ -35,8 +35,11 @@
     import PopoverContent from "../Popover/PopoverContent.svelte";
     import PopoverReference from "../Popover/PopoverReference.svelte";
     import UserCard from "../UserCard/UserCard.svelte";
-    import { IconShield } from "@stackoverflow/stacks-icons-legacy/icons";
-    import { IconCheck, IconMore16V } from "@stackoverflow/stacks-icons/icons";
+    import {
+        IconShield,
+        IconEllipsisVertical,
+    } from "@stackoverflow/stacks-icons-legacy/icons";
+    import { IconCheck } from "@stackoverflow/stacks-icons/icons";
 
     /**
      * The URL to navigate to when the post title is clicked
@@ -349,7 +352,7 @@
                         class="s-post-summary--content-menu-button"
                         variant="tonal"
                     >
-                        <Icon src={IconMore16V} />
+                        <Icon src={IconEllipsisVertical} />
                         <span class="v-visible-sr"
                             >{i18nActionMenuButtonText}</span
                         >
diff --git a/packages/stacks-svelte/src/components/index.ts b/packages/stacks-svelte/src/components/index.ts
index e551216bc9..0ef917eeb7 100644
--- a/packages/stacks-svelte/src/components/index.ts
+++ b/packages/stacks-svelte/src/components/index.ts
@@ -3,6 +3,7 @@ export { default as Avatar } from "./Avatar/Avatar.svelte";
 export { default as Badge } from "./Badge/Badge.svelte";
 export { default as Bling } from "./Bling/Bling.svelte";
 export { default as Button } from "./Button/Button.svelte";
+export { default as EmptyState } from "./EmptyState/EmptyState.svelte";
 export { default as ExpandingInput } from "./ExpandingInput/ExpandingInput.svelte";
 export { default as Icon } from "./Icon/Icon.svelte";
 export { default as Link } from "./Link/Link.svelte";