diff --git a/web/package-lock.json b/web/package-lock.json
index 9d6a41875b..84f64d7dc7 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -108,6 +108,7 @@
                 "remark-mdx-frontmatter": "^5.2.0",
                 "storybook": "^10.2.1",
                 "style-mod": "^4.1.3",
+                "stylelint": "^17.11.0",
                 "trusted-types": "^2.0.0",
                 "ts-pattern": "^5.9.0",
                 "turnstile-types": "^1.2.3",
@@ -429,6 +430,62 @@
             "integrity": "sha512-jigsZK+sMF/cuiB7sERuo9V7N9jx+dhmHHnQyDSVdpZwVutaBu7WvNYqMDLSgFgfB30n452TP3vjDAvFC973mA==",
             "license": "MIT"
         },
+        "node_modules/@cacheable/memory": {
+            "version": "2.0.8",
+            "resolved": "https://registry.npmjs.org/@cacheable/memory/-/memory-2.0.8.tgz",
+            "integrity": "sha512-FvEb29x5wVwu/Kf93IWwsOOEuhHh6dYCJF3vcKLzXc0KXIW181AOzv6ceT4ZpBHDvAfG60eqb+ekmrnLHIy+jw==",
+            "license": "MIT",
+            "dependencies": {
+                "@cacheable/utils": "^2.4.0",
+                "@keyv/bigmap": "^1.3.1",
+                "hookified": "^1.15.1",
+                "keyv": "^5.6.0"
+            }
+        },
+        "node_modules/@cacheable/memory/node_modules/@keyv/bigmap": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/@keyv/bigmap/-/bigmap-1.3.1.tgz",
+            "integrity": "sha512-WbzE9sdmQtKy8vrNPa9BRnwZh5UF4s1KTmSK0KUVLo3eff5BlQNNWDnFOouNpKfPKDnms9xynJjsMYjMaT/aFQ==",
+            "license": "MIT",
+            "dependencies": {
+                "hashery": "^1.4.0",
+                "hookified": "^1.15.0"
+            },
+            "engines": {
+                "node": ">= 18"
+            },
+            "peerDependencies": {
+                "keyv": "^5.6.0"
+            }
+        },
+        "node_modules/@cacheable/memory/node_modules/keyv": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+            "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+            "license": "MIT",
+            "dependencies": {
+                "@keyv/serialize": "^1.1.1"
+            }
+        },
+        "node_modules/@cacheable/utils": {
+            "version": "2.4.1",
+            "resolved": "https://registry.npmjs.org/@cacheable/utils/-/utils-2.4.1.tgz",
+            "integrity": "sha512-eiFgzCbIneyMlLOmNG4g9xzF7Hv3Mga4LjxjcSC/ues6VYq2+gUbQI8JqNuw/ZM8tJIeIaBGpswAsqV2V7ApgA==",
+            "license": "MIT",
+            "dependencies": {
+                "hashery": "^1.5.1",
+                "keyv": "^5.6.0"
+            }
+        },
+        "node_modules/@cacheable/utils/node_modules/keyv": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+            "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+            "license": "MIT",
+            "dependencies": {
+                "@keyv/serialize": "^1.1.1"
+            }
+        },
         "node_modules/@chevrotain/types": {
             "version": "11.1.2",
             "resolved": "https://registry.npmjs.org/@chevrotain/types/-/types-11.1.2.tgz",
@@ -609,6 +666,161 @@
                 "w3c-keyname": "^2.2.4"
             }
         },
+        "node_modules/@csstools/css-calc": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.2.0.tgz",
+            "integrity": "sha512-bR9e6o2BDB12jzN/gIbjHa5wLJ4UjD1CB9pM7ehlc0ddk6EBz+yYS1EV2MF55/HUxrHcB/hehAyt5vhsA3hx7w==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "@csstools/css-parser-algorithms": "^4.0.0",
+                "@csstools/css-tokenizer": "^4.0.0"
+            }
+        },
+        "node_modules/@csstools/css-parser-algorithms": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-4.0.0.tgz",
+            "integrity": "sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "@csstools/css-tokenizer": "^4.0.0"
+            }
+        },
+        "node_modules/@csstools/css-syntax-patches-for-csstree": {
+            "version": "1.1.3",
+            "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.3.tgz",
+            "integrity": "sha512-SH60bMfrRCJF3morcdk57WklujF4Jr/EsQUzqkarfHXEFcAR1gg7fS/chAE922Sehgzc1/+Tz5H3Ypa1HiEKrg==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT-0",
+            "peerDependencies": {
+                "css-tree": "^3.2.1"
+            },
+            "peerDependenciesMeta": {
+                "css-tree": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/@csstools/css-tokenizer": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-4.0.0.tgz",
+            "integrity": "sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19.0"
+            }
+        },
+        "node_modules/@csstools/media-query-list-parser": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-5.0.0.tgz",
+            "integrity": "sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "@csstools/css-parser-algorithms": "^4.0.0",
+                "@csstools/css-tokenizer": "^4.0.0"
+            }
+        },
+        "node_modules/@csstools/selector-resolve-nested": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/@csstools/selector-resolve-nested/-/selector-resolve-nested-4.0.0.tgz",
+            "integrity": "sha512-9vAPxmp+Dx3wQBIUwc1v7Mdisw1kbbaGqXUM8QLTgWg7SoPGYtXBsMXvsFs/0Bn5yoFhcktzxNZGNaUt0VjgjA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT-0",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "postcss-selector-parser": "^7.1.1"
+            }
+        },
+        "node_modules/@csstools/selector-specificity": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-6.0.0.tgz",
+            "integrity": "sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/csstools"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/csstools"
+                }
+            ],
+            "license": "MIT-0",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "postcss-selector-parser": "^7.1.1"
+            }
+        },
         "node_modules/@dozerg/condition": {
             "version": "1.0.11",
             "resolved": "https://registry.npmjs.org/@dozerg/condition/-/condition-1.0.11.tgz",
@@ -2980,9 +3192,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -2999,9 +3208,6 @@
             "cpu": [
                 "arm64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3018,9 +3224,6 @@
             "cpu": [
                 "ppc64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3037,9 +3240,6 @@
             "cpu": [
                 "s390x"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3056,9 +3256,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "glibc"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -3075,9 +3272,6 @@
             "cpu": [
                 "x64"
             ],
-            "libc": [
-                "musl"
-            ],
             "license": "MIT",
             "optional": true,
             "os": [
@@ -6564,6 +6758,15 @@
                 "node": ">=12"
             }
         },
+        "node_modules/astral-regex": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
+            "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/astring": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
@@ -7005,6 +7208,19 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/cacheable": {
+            "version": "2.3.5",
+            "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.3.5.tgz",
+            "integrity": "sha512-EQfaKe09tl615iNvq/TBRWTFf1AKJNXYQSsMx0Z3EI0nA+pVsVPS8wJhnRlkbdacKPh1d0qVIhwTc2zsQNFEEg==",
+            "license": "MIT",
+            "dependencies": {
+                "@cacheable/memory": "^2.0.8",
+                "@cacheable/utils": "^2.4.1",
+                "hookified": "^1.15.0",
+                "keyv": "^5.6.0",
+                "qified": "^0.10.1"
+            }
+        },
         "node_modules/cacheable-lookup": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
@@ -7057,6 +7273,15 @@
                 "@keyv/serialize": "^1.1.1"
             }
         },
+        "node_modules/cacheable/node_modules/keyv": {
+            "version": "5.6.0",
+            "resolved": "https://registry.npmjs.org/keyv/-/keyv-5.6.0.tgz",
+            "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
+            "license": "MIT",
+            "dependencies": {
+                "@keyv/serialize": "^1.1.1"
+            }
+        },
         "node_modules/call-bind": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
@@ -7354,6 +7579,12 @@
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
             "license": "MIT"
         },
+        "node_modules/colord": {
+            "version": "2.9.3",
+            "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+            "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
+            "license": "MIT"
+        },
         "node_modules/colorette": {
             "version": "2.0.20",
             "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -7471,6 +7702,50 @@
                 "layout-base": "^1.0.0"
             }
         },
+        "node_modules/cosmiconfig": {
+            "version": "9.0.1",
+            "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.1.tgz",
+            "integrity": "sha512-hr4ihw+DBqcvrsEDioRO31Z17x71pUYoNe/4h6Z0wB72p7MU7/9gH8Q3s12NFhHPfYBBOV3qyfUxmr/Yn3shnQ==",
+            "license": "MIT",
+            "dependencies": {
+                "env-paths": "^2.2.1",
+                "import-fresh": "^3.3.0",
+                "js-yaml": "^4.1.0",
+                "parse-json": "^5.2.0"
+            },
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/d-fischer"
+            },
+            "peerDependencies": {
+                "typescript": ">=4.9.5"
+            },
+            "peerDependenciesMeta": {
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/cosmiconfig/node_modules/parse-json": {
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+            "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+            "license": "MIT",
+            "dependencies": {
+                "@babel/code-frame": "^7.0.0",
+                "error-ex": "^1.3.1",
+                "json-parse-even-better-errors": "^2.3.0",
+                "lines-and-columns": "^1.1.6"
+            },
+            "engines": {
+                "node": ">=8"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/country-flag-icons": {
             "version": "1.6.17",
             "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.6.17.tgz",
@@ -7497,6 +7772,28 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/css-functions-list": {
+            "version": "3.3.3",
+            "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.3.3.tgz",
+            "integrity": "sha512-8HFEBPKhOpJPEPu70wJJetjKta86Gw9+CCyCnB3sui2qQfOvRyqBy4IKLKKAwdMpWb2lHXWk9Wb4Z6AmaUT1Pg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            }
+        },
+        "node_modules/css-tree": {
+            "version": "3.2.1",
+            "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
+            "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+            "license": "MIT",
+            "dependencies": {
+                "mdn-data": "2.27.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+            }
+        },
         "node_modules/css.escape": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -7509,6 +7806,18 @@
             "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
             "license": "MIT"
         },
+        "node_modules/cssesc": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+            "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+            "license": "MIT",
+            "bin": {
+                "cssesc": "bin/cssesc"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/csstype": {
             "version": "3.2.3",
             "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
@@ -8440,6 +8749,15 @@
                 "url": "https://github.com/fb55/entities?sponsor=1"
             }
         },
+        "node_modules/env-paths": {
+            "version": "2.2.1",
+            "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
+            "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/error-ex": {
             "version": "1.3.4",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
@@ -9361,6 +9679,31 @@
             "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
             "license": "MIT"
         },
+        "node_modules/fast-uri": {
+            "version": "3.1.2",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.2.tgz",
+            "integrity": "sha512-rVjf7ArG3LTk+FS6Yw81V1DLuZl1bRbNrev6Tmd/9RaroeeRRJhAt7jg/6YFxbvAQXUCavSoZhPPj6oOx+5KjQ==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/fastify"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/fastify"
+                }
+            ],
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/fastest-levenshtein": {
+            "version": "1.0.16",
+            "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+            "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4.9.1"
+            }
+        },
         "node_modules/fastq": {
             "version": "1.20.1",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
@@ -9872,6 +10215,18 @@
                 "node": "6.* || 8.* || >= 10.*"
             }
         },
+        "node_modules/get-east-asian-width": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.6.0.tgz",
+            "integrity": "sha512-QRbvDIbx6YklUe6RxeTeleMR0yv3cYH6PsPZHcnVn7xv7zO1BHN8r0XETu8n6Ye3Q+ahtSarc3WgtNWmehIBfA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/get-intrinsic": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -9959,6 +10314,44 @@
                 "node": ">=10.13.0"
             }
         },
+        "node_modules/global-modules": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+            "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+            "license": "MIT",
+            "dependencies": {
+                "global-prefix": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/global-prefix": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+            "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+            "license": "MIT",
+            "dependencies": {
+                "ini": "^1.3.5",
+                "kind-of": "^6.0.2",
+                "which": "^1.3.1"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
+        "node_modules/global-prefix/node_modules/which": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+            "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "which": "bin/which"
+            }
+        },
         "node_modules/globals": {
             "version": "17.6.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-17.6.0.tgz",
@@ -10016,6 +10409,12 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/globjoin": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+            "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+            "license": "MIT"
+        },
         "node_modules/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -10168,6 +10567,18 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/hashery": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/hashery/-/hashery-1.5.1.tgz",
+            "integrity": "sha512-iZyKG96/JwPz1N55vj2Ie2vXbhu440zfUfJvSwEqEbeLluk7NnapfGqa7LH0mOsnDxTF85Mx8/dyR6HfqcbmbQ==",
+            "license": "MIT",
+            "dependencies": {
+                "hookified": "^1.15.0"
+            },
+            "engines": {
+                "node": ">=20"
+            }
+        },
         "node_modules/hasown": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -10429,12 +10840,30 @@
                 "node": ">=12.0.0"
             }
         },
+        "node_modules/hookified": {
+            "version": "1.15.1",
+            "resolved": "https://registry.npmjs.org/hookified/-/hookified-1.15.1.tgz",
+            "integrity": "sha512-MvG/clsADq1GPM2KGo2nyfaWVyn9naPiXrqIe4jYjXNZQt238kWyOGrsyc/DmRAQ+Re6yeo6yX/yoNCG5KAEVg==",
+            "license": "MIT"
+        },
         "node_modules/hosted-git-info": {
             "version": "2.8.9",
             "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
             "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
             "license": "ISC"
         },
+        "node_modules/html-tags": {
+            "version": "5.1.0",
+            "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-5.1.0.tgz",
+            "integrity": "sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.10"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/html-void-elements": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
@@ -10548,6 +10977,16 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/import-meta-resolve": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/import-meta-resolve/-/import-meta-resolve-4.2.0.tgz",
+            "integrity": "sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/imurmurhash": {
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -10566,6 +11005,12 @@
                 "node": ">=8"
             }
         },
+        "node_modules/ini": {
+            "version": "1.3.8",
+            "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+            "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+            "license": "ISC"
+        },
         "node_modules/inline-style-parser": {
             "version": "0.2.7",
             "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.7.tgz",
@@ -10984,6 +11429,15 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/is-plain-object": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+            "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/is-potential-custom-element-name": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -11284,6 +11738,12 @@
             "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
             "license": "MIT"
         },
+        "node_modules/json-parse-even-better-errors": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+            "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+            "license": "MIT"
+        },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -11758,6 +12218,12 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/lines-and-columns": {
+            "version": "1.2.4",
+            "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+            "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+            "license": "MIT"
+        },
         "node_modules/lit": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz",
@@ -11940,6 +12406,12 @@
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
             "license": "MIT"
         },
+        "node_modules/lodash.truncate": {
+            "version": "4.4.2",
+            "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+            "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+            "license": "MIT"
+        },
         "node_modules/log4js": {
             "version": "6.9.1",
             "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.9.1.tgz",
@@ -12117,6 +12589,16 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/mathml-tag-names": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-4.0.0.tgz",
+            "integrity": "sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==",
+            "license": "MIT",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/wooorm"
+            }
+        },
         "node_modules/md-front-matter": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/md-front-matter/-/md-front-matter-1.0.4.tgz",
@@ -12476,6 +12958,12 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdn-data": {
+            "version": "2.27.1",
+            "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
+            "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+            "license": "CC0-1.0"
+        },
         "node_modules/memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -12484,6 +12972,18 @@
                 "node": ">= 0.10.0"
             }
         },
+        "node_modules/meow": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/meow/-/meow-14.1.0.tgz",
+            "integrity": "sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/merge-stream": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -14631,6 +15131,51 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss-safe-parser": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.1.tgz",
+            "integrity": "sha512-0AioNCJZ2DPYz5ABT6bddIqlhgwhpHZ/l65YAYo0BCIn0xiDpsnTHz0gnoTGk0OXZW0JRs+cDwL8u/teRdz+8A==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.0"
+            },
+            "peerDependencies": {
+                "postcss": "^8.4.31"
+            }
+        },
+        "node_modules/postcss-selector-parser": {
+            "version": "7.1.1",
+            "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-7.1.1.tgz",
+            "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
+            "license": "MIT",
+            "dependencies": {
+                "cssesc": "^3.0.0",
+                "util-deprecate": "^1.0.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/postcss-value-parser": {
+            "version": "4.2.0",
+            "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+            "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+            "license": "MIT"
+        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -14837,6 +15382,24 @@
                 "node": ">=6"
             }
         },
+        "node_modules/qified": {
+            "version": "0.10.1",
+            "resolved": "https://registry.npmjs.org/qified/-/qified-0.10.1.tgz",
+            "integrity": "sha512-+Owyggi9IxT1ePKGafcI87ubSmxol6smwJ+RAHDQlx9+9cPwFWDiKFFCPuWhr9ignlGpZ9vDQLw67N4dcTVFEA==",
+            "license": "MIT",
+            "dependencies": {
+                "hookified": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=20"
+            }
+        },
+        "node_modules/qified/node_modules/hookified": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.2.0.tgz",
+            "integrity": "sha512-p/LgFzRN5FeoD3DLS6bkUapeye6E4SI6yJs6KetENd18S+FBthqYq2amJUWpt5z0EQwwHemidjY5OqJGEKm5uA==",
+            "license": "MIT"
+        },
         "node_modules/qrjs": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/qrjs/-/qrjs-0.2.0.tgz",
@@ -15436,6 +15999,15 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/require-from-string": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+            "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/resolve": {
             "version": "1.22.11",
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -16047,6 +16619,23 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/slice-ansi": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+            "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+            "license": "MIT",
+            "dependencies": {
+                "ansi-styles": "^4.0.0",
+                "astral-regex": "^2.0.0",
+                "is-fullwidth-code-point": "^3.0.0"
+            },
+            "engines": {
+                "node": ">=10"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+            }
+        },
         "node_modules/smob": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/smob/-/smob-1.6.1.tgz",
@@ -17123,6 +17712,166 @@
                 "inline-style-parser": "0.2.7"
             }
         },
+        "node_modules/stylelint": {
+            "version": "17.11.0",
+            "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.11.0.tgz",
+            "integrity": "sha512-/3czzmbF9XdGWvReDF3Ex4R23Ajolo7j8RB2bFNEqk6Ht356nlpVV+G5bG2Qt8AW1ofJzXztBRDnAtd7cgowWA==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/stylelint"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/stylelint"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "@csstools/css-calc": "^3.2.0",
+                "@csstools/css-parser-algorithms": "^4.0.0",
+                "@csstools/css-syntax-patches-for-csstree": "^1.1.3",
+                "@csstools/css-tokenizer": "^4.0.0",
+                "@csstools/media-query-list-parser": "^5.0.0",
+                "@csstools/selector-resolve-nested": "^4.0.0",
+                "@csstools/selector-specificity": "^6.0.0",
+                "colord": "^2.9.3",
+                "cosmiconfig": "^9.0.1",
+                "css-functions-list": "^3.3.3",
+                "css-tree": "^3.2.1",
+                "debug": "^4.4.3",
+                "fast-glob": "^3.3.3",
+                "fastest-levenshtein": "^1.0.16",
+                "file-entry-cache": "^11.1.2",
+                "global-modules": "^2.0.0",
+                "globby": "^16.2.0",
+                "globjoin": "^0.1.4",
+                "html-tags": "^5.1.0",
+                "ignore": "^7.0.5",
+                "import-meta-resolve": "^4.2.0",
+                "is-plain-object": "^5.0.0",
+                "mathml-tag-names": "^4.0.0",
+                "meow": "^14.1.0",
+                "micromatch": "^4.0.8",
+                "normalize-path": "^3.0.0",
+                "picocolors": "^1.1.1",
+                "postcss": "^8.5.13",
+                "postcss-safe-parser": "^7.0.1",
+                "postcss-selector-parser": "^7.1.1",
+                "postcss-value-parser": "^4.2.0",
+                "string-width": "^8.2.1",
+                "supports-hyperlinks": "^4.4.0",
+                "svg-tags": "^1.0.0",
+                "table": "^6.9.0",
+                "write-file-atomic": "^7.0.1"
+            },
+            "bin": {
+                "stylelint": "bin/stylelint.mjs"
+            },
+            "engines": {
+                "node": ">=20.19.0"
+            }
+        },
+        "node_modules/stylelint/node_modules/ansi-regex": {
+            "version": "6.2.2",
+            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+            "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+            }
+        },
+        "node_modules/stylelint/node_modules/file-entry-cache": {
+            "version": "11.1.3",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.3.tgz",
+            "integrity": "sha512-oMbq0PD6VIiIwMF6LIa7MEwd/l9huKwmqRKXqmrkqIZv8CvRbfowL+L0ryAl8h//HfAS0zS+4SbYoRyAoA6BJA==",
+            "license": "MIT",
+            "dependencies": {
+                "flat-cache": "^6.1.22"
+            }
+        },
+        "node_modules/stylelint/node_modules/flat-cache": {
+            "version": "6.1.22",
+            "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-6.1.22.tgz",
+            "integrity": "sha512-N2dnzVJIphnNsjHcrxGW7DePckJ6haPrSFqpsBUhHYgwtKGVq4JrBGielEGD2fCVnsGm1zlBVZ8wGhkyuetgug==",
+            "license": "MIT",
+            "dependencies": {
+                "cacheable": "^2.3.4",
+                "flatted": "^3.4.2",
+                "hookified": "^1.15.0"
+            }
+        },
+        "node_modules/stylelint/node_modules/ignore": {
+            "version": "7.0.5",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+            "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/stylelint/node_modules/postcss": {
+            "version": "8.5.14",
+            "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.14.tgz",
+            "integrity": "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg==",
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "tidelift",
+                    "url": "https://tidelift.com/funding/github/npm/postcss"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "nanoid": "^3.3.11",
+                "picocolors": "^1.1.1",
+                "source-map-js": "^1.2.1"
+            },
+            "engines": {
+                "node": "^10 || ^12 || >=14"
+            }
+        },
+        "node_modules/stylelint/node_modules/string-width": {
+            "version": "8.2.1",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.1.tgz",
+            "integrity": "sha512-IIaP0g3iy9Cyy18w3M9YcaDudujEAVHKt3a3QJg1+sr/oX96TbaGUubG0hJyCjCBThFH+tFpcIyoUHUn1ogaLA==",
+            "license": "MIT",
+            "dependencies": {
+                "get-east-asian-width": "^1.5.0",
+                "strip-ansi": "^7.1.2"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/stylelint/node_modules/strip-ansi": {
+            "version": "7.2.0",
+            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+            "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+            "license": "MIT",
+            "dependencies": {
+                "ansi-regex": "^6.2.2"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+            }
+        },
         "node_modules/stylis": {
             "version": "4.3.6",
             "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.6.tgz",
@@ -17158,6 +17907,46 @@
                 "node": ">=8"
             }
         },
+        "node_modules/supports-hyperlinks": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-4.4.0.tgz",
+            "integrity": "sha512-UKbpT93hN5Nr9go5UY7bopIB9YQlMz9nm/ct4IXt/irb5YRkn9WaqrOBJGZ5Pwvsd5FQzSVeYlGdXoCAPQZrPg==",
+            "license": "MIT",
+            "dependencies": {
+                "has-flag": "^5.0.1",
+                "supports-color": "^10.2.2"
+            },
+            "engines": {
+                "node": ">=20"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/supports-hyperlinks?sponsor=1"
+            }
+        },
+        "node_modules/supports-hyperlinks/node_modules/has-flag": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-5.0.1.tgz",
+            "integrity": "sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
+        "node_modules/supports-hyperlinks/node_modules/supports-color": {
+            "version": "10.2.2",
+            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-10.2.2.tgz",
+            "integrity": "sha512-SS+jx45GF1QjgEXQx4NJZV9ImqmO2NPz5FNsIHrsDjh2YsHnawpan7SNQ1o8NuhrbHZy9AZhIoCUiCeaW/C80g==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=18"
+            },
+            "funding": {
+                "url": "https://github.com/chalk/supports-color?sponsor=1"
+            }
+        },
         "node_modules/supports-preserve-symlinks-flag": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
@@ -17170,6 +17959,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/svg-tags": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+            "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA=="
+        },
         "node_modules/swagger-client": {
             "version": "3.37.1",
             "resolved": "https://registry.npmjs.org/swagger-client/-/swagger-client-3.37.1.tgz",
@@ -17197,6 +17991,44 @@
                 "ramda-adjunct": "^5.1.0"
             }
         },
+        "node_modules/table": {
+            "version": "6.9.0",
+            "resolved": "https://registry.npmjs.org/table/-/table-6.9.0.tgz",
+            "integrity": "sha512-9kY+CygyYM6j02t5YFHbNz2FN5QmYGv9zAjVp4lCDjlCw7amdckXlEt/bjMhUIfj4ThGRE4gCUH5+yGnNuPo5A==",
+            "license": "BSD-3-Clause",
+            "dependencies": {
+                "ajv": "^8.0.1",
+                "lodash.truncate": "^4.4.2",
+                "slice-ansi": "^4.0.0",
+                "string-width": "^4.2.3",
+                "strip-ansi": "^6.0.1"
+            },
+            "engines": {
+                "node": ">=10.0.0"
+            }
+        },
+        "node_modules/table/node_modules/ajv": {
+            "version": "8.20.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.20.0.tgz",
+            "integrity": "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==",
+            "license": "MIT",
+            "dependencies": {
+                "fast-deep-equal": "^3.1.3",
+                "fast-uri": "^3.0.1",
+                "json-schema-traverse": "^1.0.0",
+                "require-from-string": "^2.0.2"
+            },
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/epoberezkin"
+            }
+        },
+        "node_modules/table/node_modules/json-schema-traverse": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+            "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+            "license": "MIT"
+        },
         "node_modules/tagged-tag": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
@@ -17977,6 +18809,12 @@
                 "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
             }
         },
+        "node_modules/util-deprecate": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+            "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+            "license": "MIT"
+        },
         "node_modules/utility-types": {
             "version": "3.11.0",
             "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
@@ -18635,6 +19473,30 @@
             "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
             "license": "ISC"
         },
+        "node_modules/write-file-atomic": {
+            "version": "7.0.1",
+            "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-7.0.1.tgz",
+            "integrity": "sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==",
+            "license": "ISC",
+            "dependencies": {
+                "signal-exit": "^4.0.1"
+            },
+            "engines": {
+                "node": "^20.17.0 || >=22.9.0"
+            }
+        },
+        "node_modules/write-file-atomic/node_modules/signal-exit": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+            "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+            "license": "ISC",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/isaacs"
+            }
+        },
         "node_modules/ws": {
             "version": "8.20.0",
             "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
diff --git a/web/package.json b/web/package.json
index 91e8a98793..15da63e91a 100644
--- a/web/package.json
+++ b/web/package.json
@@ -184,6 +184,7 @@
         "remark-mdx-frontmatter": "^5.2.0",
         "storybook": "^10.2.1",
         "style-mod": "^4.1.3",
+        "stylelint": "^17.11.0",
         "trusted-types": "^2.0.0",
         "ts-pattern": "^5.9.0",
         "turnstile-types": "^1.2.3",
diff --git a/web/src/elements/ak-drawer/ak-drawer.component.ts b/web/src/elements/ak-drawer/ak-drawer.component.ts
index 92be37e506..09677bfabd 100644
--- a/web/src/elements/ak-drawer/ak-drawer.component.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.component.ts
@@ -1,32 +1,73 @@
-import Style from "./ak-drawer.css";
+import AKDrawer from "./ak-drawer.styles";
+import { DrawerResizeController } from "./drawerResizeController";
 
-import { AKElement } from "#elements/Base";
-import { classList } from "#elements/directives/class-list";
-
-import { html } from "lit";
+import { html, LitElement, nothing, PropertyValues } from "lit";
 import { property } from "lit/decorators.js";
 
-import PFDrawer from "@patternfly/patternfly/components/Drawer/drawer.css";
+export class DrawerExpandRequest extends Event {
+    static readonly eventName = "ak-drawer-expand-request";
+    expanded: boolean | null = null;
 
-export class Drawer extends AKElement {
-    static readonly styles = [PFDrawer, Style];
+    constructor(expanded: boolean | null = null) {
+        super(DrawerExpandRequest.eventName, { bubbles: true, composed: true });
+        this.expanded = expanded;
+    }
+}
+
+export class AkDrawer extends LitElement {
+    static readonly styles = [AKDrawer];
+
+    @property({ type: Boolean })
+    public resizable = false;
 
     @property({ type: Boolean, reflect: true })
-    public open = false;
+    public expanded = false;
 
-    render() {
-        const open = [(this.open && "pf-m-expanded") || "pf-m-collapsed"];
+    @property({ type: Boolean, reflect: true })
+    public resizing = false;
 
+    @property({ type: String, reflect: true })
+    public width = "33";
+
+    private resize = new DrawerResizeController(this);
+
+    onDrawerRequest = (ev: DrawerExpandRequest) => {
+        ev.stopPropagation();
+        this.expanded = ev.expanded === null ? !this.expanded : ev.expanded;
+    };
+
+    constructor() {
+        super();
+        this.addEventListener(DrawerExpandRequest.eventName, this.onDrawerRequest);
+    }
+
+    public override render() {
         return html`
-            <div class="pf-c-page__drawer">
-                <div class="pf-c-drawer ${classList(open)}" id="flow-drawer">
-                    <div class="pf-c-drawer__main">
-                        <div class="pf-c-drawer__content">
-                            <div class="pf-c-drawer__body">
-                                <slot></slot>
-                            </div>
+            <div class="ak-v2-c-drawer" part="drawer">
+                <div class="ak-v2-c-drawer__main" part="drawer-main">
+                    <div class="ak-v2-c-drawer__content" part="drawer-content">
+                        <div class="ak-v2-c-drawer__body" part="drawer-body">
+                            <slot></slot>
                         </div>
-                        <div class="pf-c-drawer__panel pf-m-width-33">
+                    </div>
+                    <div class="ak-v2-c-drawer__panel" part="drawer-panel">
+                        ${this.resizable
+                            ? html` <div
+                                  class="ak-v2-c-drawer__splitter"
+                                  part="drawer-splitter"
+                                  @mousedown=${this.resize.handleMouseDown}
+                                  @keydown=${this.resize.handleKeyDown}
+                                  @touchstart=${this.resize.handleTouchStart}
+                                  role="separator"
+                                  tabindex="0"
+                              >
+                                  <div
+                                      class="ak-v2-c-drawer__splitter-handle"
+                                      aria-hidden="true"
+                                  ></div>
+                              </div>`
+                            : nothing}
+                        <div class="ak-v2-c-drawer__panel-main" part="drawer-panel-main">
                             <slot name="panel"></slot>
                         </div>
                     </div>
@@ -34,4 +75,26 @@ export class Drawer extends AKElement {
             </div>
         `;
     }
+
+    public override updated(changed: PropertyValues<this>) {
+        super.updated(changed);
+
+        // Simulate the behavior of summary/details, another disclosure pattern.
+        const expanded = changed.get("expanded");
+        if (expanded !== undefined) {
+            const expandedMsg = (i: boolean) => (i ? "open" : "closed");
+            this.dispatchEvent(
+                new ToggleEvent("toggle", {
+                    newState: expandedMsg(this.expanded),
+                    oldState: expandedMsg(expanded),
+                }),
+            );
+        }
+    }
+}
+
+declare global {
+    interface GlobalEventHandlersEventMap {
+        [DrawerExpandRequest.eventName]: DrawerExpandRequest;
+    }
 }
diff --git a/web/src/elements/ak-drawer/ak-drawer.css b/web/src/elements/ak-drawer/ak-drawer.css
deleted file mode 100644
index bdd00ca363..0000000000
--- a/web/src/elements/ak-drawer/ak-drawer.css
+++ /dev/null
@@ -1,40 +0,0 @@
-slot {
-    display: content;
-}
-
-[data-theme="dark"] {
-    --pf-c-drawer__panel--BackgroundColor: var(--ak-dark-background);
-}
-
-.pf-c-drawer {
-    /* TODO: Revisit this after native <dialog> modals are implemented. */
-    --pf-c-drawer__content--ZIndex: auto;
-}
-
-.pf-c-drawer__body {
-    display: flex;
-    flex-flow: column;
-}
-
-.pf-c-drawer__content {
-    --pf-c-drawer__content--BackgroundColor: transparent;
-}
-
-.pf-c-drawer {
-    .pf-c-drawer__panel {
-        background-color: var(--pf-c-drawer__panel--BackgroundColor);
-
-        transition-behavior: allow-discrete;
-
-        gap: var(--pf-global--spacer--sm);
-
-        @media (width > 768px) {
-            flex-flow: row;
-
-            .pf-c-drawer__panel_content {
-                flex: 1 1 auto;
-                max-width: 33dvw;
-            }
-        }
-    }
-}
diff --git a/web/src/elements/ak-drawer/ak-drawer.root.css b/web/src/elements/ak-drawer/ak-drawer.root.css
new file mode 100644
index 0000000000..6a4aeaceca
--- /dev/null
+++ b/web/src/elements/ak-drawer/ak-drawer.root.css
@@ -0,0 +1,141 @@
+/* ----------- CSS Custom Properties for DRAWER  --------------------------- */
+
+:root {
+    --ak-v2-c-drawer__content--FlexBasis: 100%;
+    --ak-v2-c-drawer__content--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__content--ZIndex: var(--ak-v2-global--ZIndex--xs, auto);
+    --ak-v2-c-drawer__panel--MinWidth: 50%;
+    --ak-v2-c-drawer__panel--MaxHeight: auto;
+    --ak-v2-c-drawer__panel--ZIndex: var(--ak-v2-global--ZIndex--sm);
+    --ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__panel--TransitionDuration: var(--ak-v2-global--TransitionDuration);
+    --ak-v2-c-drawer__panel--TransitionProperty: margin, transform, box-shadow, flex-basis;
+    --ak-v2-c-drawer__panel--FlexBasis: 100%;
+    --ak-v2-c-drawer__panel--md--FlexBasis--min: 1.5rem;
+    --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+    --ak-v2-c-drawer__panel--md--FlexBasis--max: 100%;
+    --ak-v2-c-drawer__panel--xl--MinWidth: 28.125rem;
+    --ak-v2-c-drawer__panel--xl--FlexBasis: 28.125rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--md--MinHeight: 50%;
+    --ak-v2-c-drawer--m-panel-bottom__panel--xl--MinHeight: 18.75rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--xl--FlexBasis: 18.75rem;
+    --ak-v2-c-drawer__panel--m-resizable--FlexDirection: row;
+    --ak-v2-c-drawer__panel--m-resizable--md--FlexBasis--min: var(
+        --ak-v2-c-drawer__splitter--m-vertical--Width
+    );
+    --ak-v2-c-drawer__panel--m-resizable--MinWidth: 1.5rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection: column;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min: 1.5rem;
+    --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight: 1.5rem;
+    --ak-v2-c-drawer__splitter--Height: 0.5625rem;
+    --ak-v2-c-drawer__splitter--Width: 100%;
+    --ak-v2-c-drawer__splitter--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__splitter--Cursor: row-resize;
+    --ak-v2-c-drawer__splitter--m-vertical--Height: 100%;
+    --ak-v2-c-drawer__splitter--m-vertical--Width: 0.5625rem;
+    --ak-v2-c-drawer__splitter--m-vertical--Cursor: col-resize;
+    --ak-v2-c-drawer--m-inline__splitter--focus--OutlineOffset: -0.0625rem;
+    --ak-v2-c-drawer__splitter--after--BorderColor: var(--ak-v2-global--BorderColor--100);
+    --ak-v2-c-drawer__splitter--after--border-width--base: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__splitter--after--BorderTopWidth: 0;
+    --ak-v2-c-drawer__splitter--after--BorderRightWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer__splitter--after--BorderBottomWidth: 0;
+    --ak-v2-c-drawer__splitter--after--BorderLeftWidth: 0;
+    --ak-v2-c-drawer--m-panel-left__splitter--after--BorderLeftWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline__splitter--m-vertical--Width: 0.625rem;
+    --ak-v2-c-drawer--m-inline__splitter-handle--Left: 50%;
+    --ak-v2-c-drawer--m-inline__splitter--after--BorderRightWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline__splitter--after--BorderLeftWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--Height: 0.625rem;
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top: 50%;
+    --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth: var(
+        --ak-v2-c-drawer__splitter--after--border-width--base
+    );
+    --ak-v2-c-drawer__splitter-handle--Top: 50%;
+    --ak-v2-c-drawer__splitter-handle--Left: calc(
+        50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
+    );
+    --ak-v2-c-drawer--m-panel-left__splitter-handle--Left: 50%;
+    --ak-v2-c-drawer--m-panel-bottom__splitter-handle--Top: calc(
+        50% - var(--ak-v2-c-drawer__splitter--after--border-width--base)
+    );
+    --ak-v2-c-drawer__splitter-handle--after--BorderColor: var(--ak-v2-global--Color--200);
+    --ak-v2-c-drawer__splitter-handle--after--BorderTopWidth: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__splitter-handle--after--BorderRightWidth: 0;
+    --ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth: 0;
+    --ak-v2-c-drawer__splitter--hover__splitter-handle--after--BorderColor: var(
+        --ak-v2-global--Color--100
+    );
+    --ak-v2-c-drawer__splitter--focus__splitter-handle--after--BorderColor: var(
+        --ak-v2-global--Color--100
+    );
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth: 0;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth: 0;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth: var(
+        --ak-v2-global--BorderWidth--sm
+    );
+    --ak-v2-c-drawer__splitter-handle--after--Width: 0.75rem;
+    --ak-v2-c-drawer__splitter-handle--after--Height: 0.25rem;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Width: 0.25rem;
+    --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Height: 0.75rem;
+}
+
+@media screen and (min-width: 1200px) {
+    :root {
+        --ak-v2-c-drawer__panel--MinWidth: var(--ak-v2-c-drawer__panel--xl--MinWidth);
+    }
+}
+
+:root {
+    --ak-v2-c-drawer__panel--BoxShadow: none;
+    --ak-v2-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow: var(
+        --ak-v2-global--BoxShadow--lg-top
+    );
+    --ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(--ak-v2-global--BoxShadow--lg-left);
+}
+
+:root {
+    --ak-v2-c-drawer--m-expanded--m-panel-left__panel--BoxShadow: var(
+        --ak-v2-global--BoxShadow--lg-right
+    );
+}
+
+:root {
+    --ak-v2-c-drawer__panel--after--Width: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer--m-panel-bottom__panel--after--Height: var(--ak-v2-global--BorderWidth--sm);
+    --ak-v2-c-drawer__panel--after--BackgroundColor: transparent;
+    --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor: var(
+        --ak-v2-global--BorderColor--100
+    );
+    --ak-v2-c-drawer--m-inline__panel--PaddingLeft: var(--ak-v2-c-drawer__panel--after--Width);
+    --ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight: var(
+        --ak-v2-c-drawer__panel--after--Width
+    );
+    --ak-v2-c-drawer--m-panel-bottom--m-inline__panel--PaddingTop: var(
+        --ak-v2-c-drawer__panel--after--Width
+    );
+}
+
+html[data-theme="dark"],
+.ak-t-dark,
+.pf-t-dark {
+    --ak-v2-c-drawer__panel--BackgroundColor: var(--ak-v2-global--ContentSurface);
+    --ak-v2-c-drawer__splitter--BackgroundColor: transparent;
+}
diff --git a/web/src/elements/ak-drawer/ak-drawer.stories.ts b/web/src/elements/ak-drawer/ak-drawer.stories.ts
new file mode 100644
index 0000000000..4889a4e4e4
--- /dev/null
+++ b/web/src/elements/ak-drawer/ak-drawer.stories.ts
@@ -0,0 +1,151 @@
+import "./ak-drawer";
+
+import { DrawerExpandRequest } from "./ak-drawer.component";
+
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+
+import { html, TemplateResult } from "lit";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+const toggle = (e: Event) => {
+    const button = e.target as HTMLButtonElement;
+    button.dispatchEvent(new DrawerExpandRequest());
+};
+
+const contentBlock = html`
+    <div style="padding: 1rem;">
+        <h2>Main Content</h2>
+        <p><button @click=${toggle}>Toggle Drawer</button></p>
+        <p>
+            This is the drawer's main: fill it by inserting slotted content without a slot name.
+            This is the part that stays visible most of the time.
+        </p>
+        <p>
+            Macaroon lollipop croissant sweet biscuit croissant chocolate cake. Cake cake pastry
+            soufflé pudding. Tiramisu lollipop chocolate cake toffee oat cake muffin topping tootsie
+            roll. Carrot cake bonbon chupa chups sugar plum fruitcake. Brownie sweet halvah oat cake
+            cheesecake topping chocolate. Wafer macaroon topping lollipop powder cupcake sugar plum
+            donut. Muffin wafer icing danish jelly-o bonbon. Powder shortbread brownie caramels
+            tootsie roll dragée liquorice. Cake lemon drops powder danish toffee.
+        </p>
+    </div>
+`;
+
+const panelBlock = html`
+    <style>
+        [slot="panel"] {
+            padding: 1rem;
+            background-color: var(--pf-v5-global--BackgroundColor--200, #f0f0f0);
+        }
+    </style>
+    <div slot="panel">
+        <h3>Panel Content</h3>
+        <p>This is the side panel. This is where you put the secondary information.</p>
+        <ul>
+            <li>
+                Seasonal, steamed, con panna and rich ut aged cup decaffeinated single origin con
+                panna bar
+            </li>
+            <li>Skinny mazagran whipped, black iced beans carajillo eu cream</li>
+            <li>Americano pumpkin spice milk ristretto caffeine single shot</li>
+        </ul>
+        <p><button @click=${toggle}>Toggle Drawer</button></p>
+    </div>
+`;
+
+interface DrawerProps {
+    expanded?: boolean;
+    inline?: boolean;
+    static?: boolean;
+    resizable?: boolean;
+    width?: string;
+    position?: string;
+    content?: TemplateResult;
+    panel?: TemplateResult;
+}
+
+const meta = {
+    title: "Components/Drawer",
+    component: "ak-drawer",
+    tags: ["autodocs"],
+    decorators: [
+        (story) =>
+            html`<div style="min-height: 400px; border: 1px solid #d2d2d2; overflow: hidden;">
+                ${story()}
+            </div>`,
+    ],
+    argTypes: {
+        expanded: { control: "boolean" },
+        position: {
+            control: { type: "select" },
+            options: ["right", "left", "bottom"],
+        },
+        inline: { control: "boolean" },
+        static: { control: "boolean" },
+        resizable: { control: "boolean" },
+        width: {
+            control: { type: "select" },
+            options: ["25", "33", "50", "66", "75", "100"],
+        },
+    },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+const Template: Story = {
+    args: {
+        expanded: false,
+        inline: false,
+        static: false,
+        resizable: false,
+        width: undefined,
+        position: undefined,
+        content: contentBlock,
+        panel: panelBlock,
+    },
+    render: (args) => {
+        return html` <ak-drawer
+            ?expanded=${args.expanded}
+            ?inline=${args.inline}
+            ?resizable=${args.resizable}
+            position=${ifDefined(args.position)}
+            width=${ifDefined(args.width)}
+        >
+            ${args.content} ${args.panel}
+        </ak-drawer>`;
+    },
+};
+
+export const Default: Story = {
+    render: () => html` <ak-drawer> ${contentBlock} ${panelBlock} </ak-drawer> `,
+};
+
+export const story = (args: DrawerProps = {}, name?: string): Story => ({
+    ...Template,
+    ...(name ? { name } : {}),
+    args: {
+        ...Template.args,
+        ...args,
+    },
+});
+
+export const Expanded: Story = story({ expanded: true });
+
+export const PanelLeft: Story = story({ expanded: true, position: "left" });
+
+export const PanelBottom = story({ expanded: true, position: "bottom" });
+
+export const Inline = story({ expanded: true, inline: true });
+
+export const Static = story({ expanded: true, static: true });
+
+export const Resizable = story({ expanded: true, resizable: true });
+
+export const ResizableLeft = story({ expanded: true, resizable: true, position: "left" });
+
+export const ResizableBottom = story({ expanded: true, resizable: true, position: "bottom" });
+
+export const CustomWidth = story({ expanded: true, width: "33" });
+
+export const ResponsiveWidth = story({ expanded: true, width: "75-on-xl" });
diff --git a/web/src/elements/ak-drawer/ak-drawer.styles.ts b/web/src/elements/ak-drawer/ak-drawer.styles.ts
new file mode 100644
index 0000000000..87d846fbcf
--- /dev/null
+++ b/web/src/elements/ak-drawer/ak-drawer.styles.ts
@@ -0,0 +1,914 @@
+import { css } from "lit";
+
+export const styles = css`
+    :host {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+    }
+
+    .ak-v2-c-drawer {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        overflow-x: hidden;
+    }
+
+    :host([position="bottom"]) .ak-v2-c-drawer {
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    slot {
+        display: contents;
+    }
+
+    :host([inline]:not([no-border])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+    :host([inline]:not([resizable])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+    :host([static]:not([no-border])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+    :host([static]:not([resizable])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        padding-inline-start: var(--ak-v2-c-drawer--m-inline__panel--PaddingLeft);
+    }
+
+    :host([position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        order: 0;
+        margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([position="left"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+        order: 1;
+    }
+
+    :host([position="bottom"]) .ak-v2-c-drawer__main {
+        flex-direction: column;
+    }
+
+    :host(:not([inline], [static])) .ak-v2-c-drawer__main {
+        position: relative;
+    }
+
+    :host(:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        position: absolute;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-end: 0;
+        max-width: var(--ak-v2-c-drawer__panel--FlexBasis);
+        transform: translateX(100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host(:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([expanded]:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([position="left"]:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        inset-inline-end: auto;
+        inset-inline-start: 0;
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([position="left"]:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([expanded][position="left"]:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([position="bottom"]:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        inset-inline-end: 0;
+        inset-inline-start: 0;
+        inset-block-start: auto;
+        inset-block-end: 0;
+        max-width: none;
+        max-height: var(--ak-v2-c-drawer__panel--FlexBasis);
+        transform: translateY(100%);
+    }
+
+    :host([position="bottom"][expanded]:not([inline], [static]))
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateY(0);
+    }
+
+    :host([class*="pf-m-resizing"]) {
+        --ak-v2-c-drawer__panel--TransitionProperty: none;
+        pointer-events: none;
+    }
+
+    :host([class*="pf-m-resizing"]) .ak-v2-c-drawer__splitter {
+        pointer-events: auto;
+    }
+
+    .ak-v2-c-drawer__main {
+        display: flex;
+        flex: 1;
+        overflow: hidden;
+    }
+
+    .ak-v2-c-drawer__content,
+    .ak-v2-c-drawer__panel,
+    .ak-v2-c-drawer__panel-main {
+        display: flex;
+        flex-direction: column;
+        flex-shrink: 0;
+        overflow: auto;
+        --ak-v2-c-drawer__content--BackgroundColor: transparent;
+    }
+
+    .ak-v2-c-drawer__content {
+        z-index: var(--ak-v2-c-drawer__content--ZIndex);
+        flex-basis: var(--ak-v2-c-drawer__content--FlexBasis);
+        order: 0;
+        background-color: var(--ak-v2-c-drawer__content--BackgroundColor);
+    }
+
+    .ak-v2-c-drawer__panel {
+        position: relative;
+        z-index: var(--ak-v2-c-drawer__panel--ZIndex);
+        flex-basis: var(--ak-v2-c-drawer__panel--FlexBasis);
+        order: 1;
+        max-height: var(--ak-v2-c-drawer__panel--MaxHeight);
+        gap: var(--ak-v2-global--spacer--sm);
+        overflow: auto;
+        background-color: var(--ak-v2-c-drawer__panel--BackgroundColor);
+        box-shadow: var(--ak-v2-c-drawer__panel--BoxShadow);
+        transition-duration: var(--ak-v2-c-drawer__panel--TransitionDuration);
+        transition-property: var(--ak-v2-c-drawer__panel--TransitionProperty);
+        transition-behavior: allow-discrete;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .ak-v2-c-drawer__panel::after {
+        position: absolute;
+        inset-block-start: 0;
+        inset-inline-start: 0;
+        width: var(--ak-v2-c-drawer__panel--after--Width);
+        height: 100%;
+        content: "";
+        background-color: var(--ak-v2-c-drawer__panel--after--BackgroundColor);
+    }
+
+    @media screen and (min-width: 768px) {
+        .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer__panel--FlexBasis: max(
+                var(--ak-v2-c-drawer__panel--md--FlexBasis--min),
+                min(
+                    var(--ak-v2-c-drawer__panel--md--FlexBasis),
+                    var(--ak-v2-c-drawer__panel--md--FlexBasis--max)
+                )
+            );
+        }
+    }
+
+    @media screen and (min-width: 1200px) {
+        :host(:not([width])) .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer__panel--md--FlexBasis: var(--ak-v2-c-drawer__panel--xl--FlexBasis);
+        }
+    }
+
+    @media screen and (min-width: 1200px) {
+        :host([position="bottom"]) .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer__panel--md--FlexBasis: var(
+                --ak-v2-c-drawer--m-panel-bottom__panel--xl--FlexBasis
+            );
+        }
+    }
+
+    :where(
+            :host(:not([position])),
+            :host([position="left"]),
+            :host([position="right"]),
+            :host([position="start"]),
+            :host([position="end"])
+        )
+        .ak-v2-c-drawer__splitter {
+        --ak-v2-c-drawer__splitter--Height: var(--ak-v2-c-drawer__splitter--m-vertical--Height);
+        --ak-v2-c-drawer__splitter--Width: var(--ak-v2-c-drawer__splitter--m-vertical--Width);
+        --ak-v2-c-drawer__splitter--Cursor: var(--ak-v2-c-drawer__splitter--m-vertical--Cursor);
+        --ak-v2-c-drawer__splitter-handle--after--Width: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Width
+        );
+        --ak-v2-c-drawer__splitter-handle--after--Height: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--Height
+        );
+        --ak-v2-c-drawer__splitter-handle--after--BorderTopWidth: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderTopWidth
+        );
+        --ak-v2-c-drawer__splitter-handle--after--BorderRightWidth: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderRightWidth
+        );
+        --ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderBottomWidth
+        );
+        --ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth: var(
+            --ak-v2-c-drawer__splitter--m-vertical__splitter-handle--after--BorderLeftWidth
+        );
+    }
+
+    .ak-v2-c-drawer__splitter {
+        position: relative;
+        display: none;
+        width: var(--ak-v2-c-drawer__splitter--Width);
+        height: var(--ak-v2-c-drawer__splitter--Height);
+        cursor: var(--ak-v2-c-drawer__splitter--Cursor);
+        background-color: var(--ak-v2-c-drawer__splitter--BackgroundColor);
+    }
+
+    .ak-v2-c-drawer__splitter:hover {
+        --ak-v2-c-drawer__splitter-handle--after--BorderColor: var(
+            --ak-v2-c-drawer__splitter--hover__splitter-handle--after--BorderColor
+        );
+    }
+
+    .ak-v2-c-drawer__splitter:focus {
+        --ak-v2-c-drawer__splitter-handle--after--BorderColor: var(
+            --ak-v2-c-drawer__splitter--focus__splitter-handle--after--BorderColor
+        );
+    }
+
+    .ak-v2-c-drawer__splitter::after {
+        position: absolute;
+        inset-block-start: 0;
+        inset-block-end: 0;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        content: "";
+        border: solid var(--ak-v2-c-drawer__splitter--after--BorderColor);
+        border-block-start-width: var(--ak-v2-c-drawer__splitter--after--BorderTopWidth);
+        border-block-end-width: var(--ak-v2-c-drawer__splitter--after--BorderBottomWidth);
+        border-inline-start-width: var(--ak-v2-c-drawer__splitter--after--BorderLeftWidth);
+        border-inline-end-width: var(--ak-v2-c-drawer__splitter--after--BorderRightWidth);
+    }
+
+    .ak-v2-c-drawer__splitter-handle {
+        position: absolute;
+        inset-block-start: var(--ak-v2-c-drawer__splitter-handle--Top);
+        inset-inline-start: var(--ak-v2-c-drawer__splitter-handle--Left);
+        transform: translate(-50%, -50%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"]) .ak-v2-c-drawer__splitter-handle {
+        transform: translate(calc(-50% * var(--ak-v2-global--inverse--multiplier)), -50%);
+    }
+
+    .ak-v2-c-drawer__splitter-handle::after {
+        display: block;
+        width: var(--ak-v2-c-drawer__splitter-handle--after--Width);
+        height: var(--ak-v2-c-drawer__splitter-handle--after--Height);
+        content: "";
+        border-color: var(--ak-v2-c-drawer__splitter-handle--after--BorderColor);
+        border-style: solid;
+        border-block-start-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderTopWidth);
+        border-block-end-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderBottomWidth);
+        border-inline-start-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderLeftWidth);
+        border-inline-end-width: var(--ak-v2-c-drawer__splitter-handle--after--BorderRightWidth);
+    }
+
+    @media screen and (min-width: 768px) {
+        :host {
+            min-width: var(--ak-v2-c-drawer__panel--MinWidth);
+        }
+
+        :host([expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            box-shadow: var(--ak-v2-c-drawer--m-expanded__panel--BoxShadow);
+        }
+
+        :host([expanded][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer__panel--md--FlexBasis--min: var(
+                --ak-v2-c-drawer__panel--m-resizable--md--FlexBasis--min
+            );
+            flex-direction: var(--ak-v2-c-drawer__panel--m-resizable--FlexDirection);
+            min-width: var(--ak-v2-c-drawer__panel--m-resizable--MinWidth);
+        }
+
+        :host([expanded][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
+            width: 0;
+            height: 0;
+        }
+
+        :host([expanded][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__splitter {
+            flex-shrink: 0;
+        }
+
+        :host([expanded][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__panel-main {
+            flex-shrink: 1;
+        }
+
+        :host([position="left"]) {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(
+                --ak-v2-c-drawer--m-expanded--m-panel-left__panel--BoxShadow
+            );
+        }
+
+        :host([position="left"][inline])
+            > .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable),
+        :host([position="left"][static])
+            > .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+            padding-inline-start: 0;
+            padding-inline-end: var(--ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
+        }
+
+        :host([position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            transform: translateX(0);
+        }
+
+        :host([position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
+            inset-inline-start: auto;
+            inset-inline-end: 0;
+        }
+
+        :host([position="left"][expanded][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__splitter {
+            --ak-v2-c-drawer__splitter-handle--Left: var(
+                --ak-v2-c-drawer--m-panel-left__splitter-handle--Left
+            );
+            --ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
+            --ak-v2-c-drawer__splitter--after--BorderLeftWidth: var(
+                --ak-v2-c-drawer--m-panel-left__splitter--after--BorderLeftWidth
+            );
+            order: 1;
+        }
+
+        :host([position="bottom"]) {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: var(
+                --ak-v2-c-drawer--m-expanded--m-panel-bottom__panel--BoxShadow
+            );
+            --ak-v2-c-drawer__panel--MaxHeight: 100%;
+            --ak-v2-c-drawer__panel--FlexBasis--min: var(
+                --ak-v2-c-drawer--m-panel-bottom__panel--FlexBasis--min
+            );
+            min-width: auto;
+            min-height: var(--ak-v2-c-drawer--m-panel-bottom__panel--md--MinHeight);
+        }
+
+        :host([position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel::after {
+            inset-block-start: 0;
+            inset-inline-start: auto;
+            width: 100%;
+            height: var(--ak-v2-c-drawer--m-panel-bottom__panel--after--Height);
+        }
+
+        :host([position="bottom"][resizable]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer__panel--md--FlexBasis--min: var(
+                --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--md--FlexBasis--min
+            );
+            --ak-v2-c-drawer__panel--m-resizable--FlexDirection: var(
+                --ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--FlexDirection
+            );
+            --ak-v2-c-drawer__panel--m-resizable--MinWidth: 0;
+            min-height: var(--ak-v2-c-drawer--m-panel-bottom__panel--m-resizable--MinHeight);
+        }
+
+        :host([position="bottom"][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__splitter {
+            --ak-v2-c-drawer__splitter-handle--Top: var(
+                --ak-v2-c-drawer--m-panel-bottom__splitter-handle--Top
+            );
+            --ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
+            --ak-v2-c-drawer__splitter--after--BorderBottomWidth: var(
+                --ak-v2-c-drawer--m-panel-bottom__splitter--after--BorderBottomWidth
+            );
+        }
+
+        :host([position="left"][inline]:not([no-border], [resizable]))
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable),
+        :host([position="left"][static]:not([no-border], [resizable]))
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
+            padding-inline-start: 0;
+            padding-inline-end: var(--ak-v2-c-drawer--m-panel-left--m-inline__panel--PaddingRight);
+        }
+
+        :host([inline][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__splitter {
+            --ak-v2-c-drawer__splitter--m-vertical--Width: var(
+                --ak-v2-c-drawer--m-inline__splitter--m-vertical--Width
+            );
+            --ak-v2-c-drawer__splitter-handle--Left: var(
+                --ak-v2-c-drawer--m-inline__splitter-handle--Left
+            );
+            --ak-v2-c-drawer__splitter--after--BorderRightWidth: var(
+                --ak-v2-c-drawer--m-inline__splitter--after--BorderRightWidth
+            );
+            --ak-v2-c-drawer__splitter--after--BorderLeftWidth: var(
+                --ak-v2-c-drawer--m-inline__splitter--after--BorderLeftWidth
+            );
+            outline-offset: var(--ak-v2-c-drawer--m-inline__splitter--focus--OutlineOffset);
+        }
+
+        :host([position="bottom"][inline][resizable])
+            .ak-v2-c-drawer__main
+            > .ak-v2-c-drawer__panel
+            > .ak-v2-c-drawer__splitter {
+            --ak-v2-c-drawer__splitter--Height: var(
+                --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--Height
+            );
+            --ak-v2-c-drawer__splitter-handle--Top: var(
+                --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter-handle--Top
+            );
+            --ak-v2-c-drawer__splitter--after--BorderTopWidth: var(
+                --ak-v2-c-drawer--m-inline--m-panel-bottom__splitter--after--BorderTopWidth
+            );
+            --ak-v2-c-drawer__splitter--after--BorderRightWidth: 0;
+            --ak-v2-c-drawer__splitter--after--BorderLeftWidth: 0;
+        }
+
+        :host([no-panel-border]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
+        }
+
+        .ak-v2-c-drawer__splitter {
+            display: block;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([width="25"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 25%;
+        }
+
+        :host([width="33"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 33%;
+        }
+
+        :host([width="50"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+        }
+
+        :host([width="66"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 66%;
+        }
+
+        :host([width="75"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 75%;
+        }
+
+        :host([width="100"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 100%;
+        }
+    }
+
+    @media (min-width: 992px) {
+        :host([width="25-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 25%;
+        }
+
+        :host([width="33-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 33%;
+        }
+
+        :host([width="50-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+        }
+
+        :host([width="66-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 66%;
+        }
+
+        :host([width="75-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 75%;
+        }
+
+        :host([width="100-on-lg"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 100%;
+        }
+    }
+
+    @media (min-width: 1200px) {
+        :host([width="25-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 25%;
+        }
+
+        :host([width="33-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 33%;
+        }
+
+        :host([width="50-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+        }
+
+        :host([width="66-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 66%;
+        }
+
+        :host([width="75-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 75%;
+        }
+
+        :host([width="100-on-xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 100%;
+        }
+    }
+
+    @media (min-width: 1450px) {
+        :host([width="25-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 25%;
+        }
+
+        :host([width="33-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 33%;
+        }
+
+        :host([width="50-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 50%;
+        }
+
+        :host([width="66-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 66%;
+        }
+
+        :host([width="75-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 75%;
+        }
+
+        :host([width="100-on-2xl"]) {
+            --ak-v2-c-drawer__panel--md--FlexBasis: 100%;
+        }
+    }
+
+    @media (min-width: 768px) {
+        :host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
+        :host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+            flex-shrink: 1;
+        }
+
+        :host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+        :host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
+        }
+
+        :host([inline]:not([no-border])),
+        :host([static]:not([no-border])) {
+            background-color: var(
+                --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
+            );
+        }
+    }
+
+    :host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+        overflow-x: auto;
+    }
+
+    :host([inline]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline][position="left"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline][position="left"][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateY(100%);
+    }
+
+    :host([inline][expanded][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-block-end: 0;
+        transform: translateY(0);
+    }
+
+    :host([static]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([static][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([static][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    @media (min-width: 992px) {
+        :host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
+        :host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+            flex-shrink: 1;
+        }
+
+        :host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+        :host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
+        }
+
+        :host([inline-on-lg]:not([no-border])),
+        :host([static-on-lg]:not([no-border])) {
+            background-color: var(
+                --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
+            );
+        }
+    }
+
+    :host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+        overflow-x: auto;
+    }
+
+    :host([inline-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-lg])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-lg][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-lg][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-lg][position="left"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-lg][position="left"][expanded])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-lg][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateY(100%);
+    }
+
+    :host([inline-on-lg][expanded][position="bottom"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-block-end: 0;
+        transform: translateY(0);
+    }
+
+    :host([static-on-lg]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([static-on-lg][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([static-on-lg][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    @media (min-width: 1200px) {
+        :host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
+        :host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+            flex-shrink: 1;
+        }
+
+        :host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+        :host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
+        }
+
+        :host([inline-on-xl]:not([no-border])),
+        :host([static-on-xl]:not([no-border])) {
+            background-color: var(
+                --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
+            );
+        }
+    }
+
+    :host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+        overflow-x: auto;
+    }
+
+    :host([inline-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-xl])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-xl][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-xl][position="left"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-xl][position="left"][expanded])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateY(100%);
+    }
+
+    :host([inline-on-xl][expanded][position="bottom"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-block-end: 0;
+        transform: translateY(0);
+    }
+
+    :host([static-on-xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([static-on-xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([static-on-xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    @media (min-width: 1450px) {
+        :host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content,
+        :host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+            flex-shrink: 1;
+        }
+
+        :host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel,
+        :host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+            --ak-v2-c-drawer--m-expanded__panel--BoxShadow: none;
+        }
+
+        :host([inline-on-2xl]:not([no-border])),
+        :host([static-on-2xl]:not([no-border])) {
+            background-color: var(
+                --ak-v2-c-drawer--m-inline--m-expanded__panel--after--BackgroundColor
+            );
+        }
+    }
+
+    :host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__content {
+        overflow-x: auto;
+    }
+
+    :host([inline-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-2xl])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-2xl][expanded]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-2xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-start: 0;
+        margin-inline-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateX(-100%);
+    }
+
+    :where(.ak-v2-m-dir-rtl, [dir="rtl"])
+        :host([inline-on-2xl][position="left"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
+    }
+
+    :host([inline-on-2xl][position="left"][expanded])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([inline-on-2xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-block-end: calc(var(--ak-v2-c-drawer__panel--FlexBasis) * -1);
+        transform: translateY(100%);
+    }
+
+    :host([inline-on-2xl][expanded][position="bottom"])
+        .ak-v2-c-drawer__main
+        > .ak-v2-c-drawer__panel {
+        margin-block-end: 0;
+        transform: translateY(0);
+    }
+
+    :host([static-on-2xl]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    :host([static-on-2xl][position="left"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        margin-inline-end: 0;
+        transform: translateX(0);
+    }
+
+    :host([static-on-2xl][position="bottom"]) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
+        transform: translateX(0);
+    }
+
+    @media screen and (min-width: 1200px) {
+        :host([position="bottom"]) {
+            --ak-v2-c-drawer__panel--MinWidth: auto;
+            --ak-v2-c-drawer__panel--MinHeight: var(
+                --ak-v2-c-drawer--m-panel-bottom__panel--xl--MinHeight
+            );
+        }
+    }
+`;
+//
+export default styles;
diff --git a/web/src/elements/ak-drawer/ak-drawer.ts b/web/src/elements/ak-drawer/ak-drawer.ts
index 12475370fe..b54c8bfb4b 100644
--- a/web/src/elements/ak-drawer/ak-drawer.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.ts
@@ -1,11 +1,11 @@
-import { Drawer } from "./ak-drawer.component.js";
+import { AkDrawer } from "./ak-drawer.component.js";
 
-export { Drawer };
+export { AkDrawer };
 
-window.customElements.define("ak-drawer", Drawer);
+window.customElements.define("ak-drawer", AkDrawer);
 
 declare global {
     interface HTMLElementTagNameMap {
-        "ak-drawer": Drawer;
+        "ak-drawer": AkDrawer;
     }
 }
diff --git a/web/src/elements/ak-drawer/drawerResizeController.ts b/web/src/elements/ak-drawer/drawerResizeController.ts
new file mode 100644
index 0000000000..600bd28fa2
--- /dev/null
+++ b/web/src/elements/ak-drawer/drawerResizeController.ts
@@ -0,0 +1,195 @@
+import { type AkDrawer } from "./ak-drawer.component";
+
+import { match, P } from "ts-pattern";
+
+import { ReactiveController, ReactiveControllerHost } from "lit";
+
+type DrawerResizeControllerHost = ReactiveControllerHost & AkDrawer;
+type Position = "start" | "end" | "left" | "right" | "bottom";
+
+const oneOf = P.union;
+
+const DEFAULT_SIZE_PROPERTY_NAME = "--ak-v2-c-drawer__panel--md--FlexBasis";
+const DEFAULT_RESIZE_INCREMENT = 5;
+
+interface ResizeControllerProps {
+    sizeProperty?: string;
+    resizeIncrement?: number;
+}
+
+export class DrawerResizeController implements ReactiveController {
+    #abortController: AbortController | null = null;
+
+    #positions: {
+        start: number;
+        end: number;
+        bottom: number;
+    } = { start: 0, end: 0, bottom: 0 };
+
+    public resizeIncrement: number;
+    public sizeProperty: string;
+
+    constructor(
+        private host: DrawerResizeControllerHost,
+        props: ResizeControllerProps = {},
+    ) {
+        this.resizeIncrement = props.resizeIncrement ?? DEFAULT_RESIZE_INCREMENT;
+        this.sizeProperty = props.sizeProperty ?? DEFAULT_SIZE_PROPERTY_NAME;
+    }
+
+    endController() {
+        this.#abortController?.abort();
+        this.#abortController = null;
+    }
+
+    restartController() {
+        this.endController();
+        this.#abortController = new AbortController();
+        return this.#abortController.signal;
+    }
+
+    hostQ(part: string): HTMLElement {
+        const element = this.host.renderRoot.querySelector(part);
+        if (element === null || !(element instanceof HTMLElement)) {
+            throw new Error(`Could not identify requested part ${element}`);
+        }
+        return element;
+    }
+
+    get drawer() {
+        return this.hostQ('[part="drawer"]');
+    }
+
+    get panel() {
+        return this.hostQ('[part="drawer-panel"]');
+    }
+
+    get content() {
+        return this.hostQ('[part="drawer-panel-main"]');
+    }
+
+    get splitter() {
+        return this.hostQ('[part="drawer-splitter"]');
+    }
+
+    get inline() {
+        return this.host.hasAttribute("inline");
+    }
+
+    get position(): Position {
+        return (this.host.getAttribute("position") || "end") as Position;
+    }
+
+    initPositions() {
+        const pan = this.panel.getBoundingClientRect();
+        this.#positions = { start: pan.left, end: pan.right, bottom: pan.bottom };
+    }
+
+    setResizing(resizing: boolean = true) {
+        if (resizing) {
+            this.host.setAttribute("resizing", "");
+        } else {
+            this.host.removeAttribute("resizing");
+        }
+    }
+
+    get isResizing() {
+        return this.host.hasAttribute("resizing");
+    }
+
+    handleMove(ev: MouseEvent | TouchEvent, controlPosition: number) {
+        ev.stopPropagation();
+        const newSize = match(this.position)
+            .with(oneOf("end", "right"), () => this.#positions.end - controlPosition)
+            .with(oneOf("start", "left"), () => controlPosition - this.#positions.start)
+            .with("bottom", () => this.#positions.bottom - controlPosition)
+            .otherwise(() => {
+                throw new Error(`Do not recognize position: ${this.position}`);
+            });
+        if (this.position === "bottom") {
+            this.panel.style.overflowAnchor = "none";
+        }
+        this.panel.style.setProperty(DEFAULT_SIZE_PROPERTY_NAME, `${newSize}px`);
+    }
+
+    handleMouseMove = (ev: MouseEvent) => {
+        this.handleMove(ev, this.position === "bottom" ? ev.clientY : ev.clientX);
+    };
+
+    handleTouchMove = (ev: TouchEvent) => {
+        ev.preventDefault();
+        ev.stopImmediatePropagation();
+        const touch = ev.touches[0];
+        this.handleMove(ev, this.position === "bottom" ? touch.clientY : touch.clientX);
+    };
+
+    handleMouseUp = () => {
+        this.setResizing(false);
+        this.initPositions();
+        this.restartController();
+    };
+
+    handleTouchEnd = (ev: TouchEvent) => {
+        ev.stopPropagation();
+        this.handleMouseUp();
+    };
+
+    handleTouchStart = (ev: TouchEvent) => {
+        ev.stopPropagation();
+        const signal = this.restartController();
+        document.addEventListener("touchmove", this.handleTouchMove, { passive: false, signal });
+        document.addEventListener("touchend", this.handleTouchEnd, { signal });
+        this.initPositions();
+        this.setResizing();
+    };
+
+    handleMouseDown = (ev: MouseEvent) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        const signal = this.restartController();
+        document.addEventListener("mousemove", this.handleMouseMove, { signal });
+        document.addEventListener("mouseup", this.handleMouseUp, { signal });
+        this.initPositions();
+        this.setResizing();
+    };
+
+    handleKeyDown = (ev: KeyboardEvent) => {
+        const key = ev.key;
+        const positionKeys =
+            this.position === "bottom" ? ["ArrowUp", "ArrowDown"] : ["ArrowLeft", "ArrowRight"];
+        const validKeys = ["Escape", "Enter", ...positionKeys];
+
+        // Prevent default behavior when resizing, but otherwise let it pass.
+        if (!validKeys.includes(key)) {
+            if (this.isResizing) {
+                ev.preventDefault();
+            }
+            return;
+        }
+        ev.preventDefault();
+
+        const delta = match([key, this.position])
+            .with(["ArrowRight", oneOf("end", "right")], () => -1 * this.resizeIncrement)
+            .with(["ArrowLeft", oneOf("end", "right")], () => this.resizeIncrement)
+            .with(["ArrowRight", oneOf("start", "left")], () => this.resizeIncrement)
+            .with(["ArrowLeft", oneOf("start", "left")], () => -1 * this.resizeIncrement)
+            .with(["ArrowUp", "bottom"], () => this.resizeIncrement)
+            .with(["ArrowDown", "bottom"], () => -1 * this.resizeIncrement)
+            .otherwise(() => 0);
+
+        const { height, width } = this.panel.getBoundingClientRect();
+        const newSize = (this.position === "bottom" ? height : width) + delta;
+        this.panel.style.setProperty(DEFAULT_SIZE_PROPERTY_NAME, `${newSize}px`);
+    };
+
+    hostConnected() {
+        this.host.updateComplete.then(() => {
+            this.initPositions();
+        });
+    }
+
+    hostDisconnected() {
+        this.#abortController?.abort();
+        this.#abortController = null;
+    }
+}
diff --git a/web/src/flow/inspector/FlowInspectorButton.ts b/web/src/flow/inspector/FlowInspectorButton.ts
index 7369f9b6c6..2829d953a3 100644
--- a/web/src/flow/inspector/FlowInspectorButton.ts
+++ b/web/src/flow/inspector/FlowInspectorButton.ts
@@ -73,9 +73,9 @@ export class FlowInspectorButton extends WithCapabilitiesConfig(AKElement) {
         const drawer = document.getElementById("flow-drawer");
         if (changed.has("open") && drawer) {
             if (this.open) {
-                drawer.setAttribute("open", "");
+                drawer.setAttribute("expanded", "");
             } else {
-                drawer.removeAttribute("open");
+                drawer.removeAttribute("expanded");
             }
         }
     }
diff --git a/web/src/styles/authentik/base/variables.css b/web/src/styles/authentik/base/variables.css
index 020fa7bbe3..cb48eaf6aa 100644
--- a/web/src/styles/authentik/base/variables.css
+++ b/web/src/styles/authentik/base/variables.css
@@ -44,8 +44,90 @@
     --ak-sidebar--minimum-auto-width: 80rem;
 }
 
-html[data-theme="dark"] {
-    --ak-global--BackgroundColorContrast--100: var(--pf-global--palette--black-150);
+/* #region Root globals, V2 */
+:root {
+    /* ---- Background Colors ---- */
+    --ak-v2-global--BackgroundColor--100: #fff;
+    --ak-v2-global--BorderWidth--sm: 1px;
+
+    /* ---- Text Colors ---------- */
+    --pf-v5-global--Color--100: #151515;
+
+    /* ---- Border Colors -------- */
+    --ak-v2-global--BorderColor--100: #d2d2d2;
+    --ak-v2-global--BorderColor--200: #8a8d90;
+
+    /* ---- Box Shadows ------ */
+    --ak-v2-global--BoxShadow--lg:
+        0 0.5rem 1rem 0 rgba(3, 3, 3, 0.16), 0 0 0.375rem 0 rgba(3, 3, 3, 0.08);
+    --ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+    --ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+    --ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+    --ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.18);
+
+    /* ---- Spacers -------------- */
+    --ak-v2-global--spacer--xs: 0.25rem;
+    --ak-v2-global--spacer--sm: 0.5rem;
+    --ak-v2-global--spacer--md: 1rem;
+    --ak-v2-global--spacer--lg: 1.5rem;
+    --ak-v2-global--spacer--xl: 2rem;
+    --ak-v2-global--spacer--2xl: 3rem;
+    --ak-v2-global--spacer--3xl: 4rem;
+    --ak-v2-global--spacer--4xl: 5rem;
+    --ak-v2-global--spacer--form-element: 0.375rem;
+    --ak-v2-global--gutter: 1rem;
+    --ak-v2-global--gutter--md: 1.5rem;
+
+    /* ---- Z-Index -------------- */
+    --ak-v2-global--ZIndex--xs: 100;
+    --ak-v2-global--ZIndex--sm: 200;
+
+    /* ---- Animation ------------ */
+    --ak-v2-global--TransitionDuration: 250ms;
+
+    /* ---- Customization Bridge - */
+    --ak-v2-global--dark-background: var(--ak-dark-background);
+}
+
+/* -------- Dark Theme ------------------------------- */
+
+[data-theme="dark"] {
+    /* ---- Background Colors ---- */
+    --ak-v2-global--BackgroundColor--100: #18191a;
+
+    /* ---- Text Colors ---------- */
+    --ak-v2-global--Color--100: #e0e0e0;
+
+    /* ---- Border Colors -------- */
+    --ak-v2-global--BorderColor--100: #444548;
+    --ak-v2-global--BorderColor--200: #444548;
+
+    /* ---- Box Shadows ------ */
+    --ak-v2-global--BoxShadow--lg:
+        0 0.5rem 1rem 0 rgba(3, 3, 3, 0.64), 0 0 0.375rem 0 rgba(3, 3, 3, 0.32);
+    --ak-v2-global--BoxShadow--lg-top: 0 -0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+    --ak-v2-global--BoxShadow--lg-right: 0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+    --ak-v2-global--BoxShadow--lg-bottom: 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+    --ak-v2-global--BoxShadow--lg-left: -0.75rem 0 0.75rem -0.5rem rgba(3, 3, 3, 0.72);
+}
+
+/* -------- Semantic Names -------------------------- */
+
+:root {
+    /* ---- Background Colors ---- */
+    --ak-v2-global--ContentSurface: var(--ak-v2-global--BackgroundColor--100);
+    --ak-v2-global--SecondaryContentSurface: var(--ak-v2-global--BackgroundColor--200);
+    /* Not sure what to call this next one; this is the background color Patternfly uses when you hover
+       over something and it changes color to indicate it's interactive in some way. It's the same
+       color as the one above in their default theme. */
+    --ak-v2-global--AffordanceIndicatedSurface: var(--ak-v2-global--BackgroundColor--200);
+
+    /* ---- Text Colors ---- */
+    --ak-v2-global--PrimaryText: var(--ak-v2-global--Color--100);
+
+    /* ---- Border Colors ---- */
+    --ak-v2-global--StandardBorder: var(--pf-v5-global--BorderColor--100);
+    --ak-v2-global--InputAccentBorder: var(--pf-v5-global--BorderColor--200);
 }
 
 /* #endregion */
diff --git a/web/src/styles/authentik/flows.global.css b/web/src/styles/authentik/flows.global.css
index 9d0636a10d..c5db595bbf 100644
--- a/web/src/styles/authentik/flows.global.css
+++ b/web/src/styles/authentik/flows.global.css
@@ -14,6 +14,7 @@
 @import "./base/globals.css";
 @import "./base/common.css";
 @import "./base/placeholder.css";
+@import "#elements/ak-drawer/ak-drawer.root.css";
 
 @import "#styles/locales/ja/globals.css";
 @import "#styles/locales/ko/globals.css";
diff --git a/web/src/styles/authentik/static.global.css b/web/src/styles/authentik/static.global.css
index b1e721fd65..cf25b98cfd 100644
--- a/web/src/styles/authentik/static.global.css
+++ b/web/src/styles/authentik/static.global.css
@@ -12,6 +12,7 @@
 @import "./components/Fieldset/fieldset.css";
 @import "./components/Login/login.css";
 @import "./components/Icon/icon.css";
+@import "#elements/ak-drawer/ak-drawer.root.css";
 @import "#elements/locale/ak-locale-select.css";
 @import "#elements/locale/ak-locale-select.css";
 @import "#flow/FlowExecutor.css";
diff --git a/web/stylelint.config.mjs b/web/stylelint.config.mjs
new file mode 100644
index 0000000000..85aaece3c7
--- /dev/null
+++ b/web/stylelint.config.mjs
@@ -0,0 +1,21 @@
+/** @type { import("stylelint").Config } */
+export default {
+    extends: "stylelint-config-standard",
+    rules: {
+        "custom-property-pattern": [
+            "^([A-Za-z][A-Za-z0-9]*)((__|--?)[A-Za-z0-9]+)*$",
+            {
+                message: "Expected custom property name to be kebab-case",
+            },
+        ],
+        "selector-class-pattern": [
+            "^([a-z][a-z0-9]*)((__?|-)[A-Za-z0-9]+)*$",
+            {
+                message: (/** @type {string} */ selector) =>
+                    `Expected class selector "${selector}" to be kebab-case`,
+            },
+        ],
+        "declaration-empty-line-before": null,
+        "media-feature-range-notation": null,
+    },
+};