From d4ea46e85714c1bc46e91159bf80bbacd747262b Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Tue, 3 Mar 2026 10:27:33 -0800
Subject: [PATCH 1/9] .

---
 .gitignore                |  10 +++
 web/package.json          |   2 +-
 web/scripts/build-web.mjs | 165 +++++++++++++++++---------------------
 3 files changed, 85 insertions(+), 92 deletions(-)

diff --git a/.gitignore b/.gitignore
index b8c9c3579c78..63788588e9d9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -213,3 +213,13 @@ source_docs/
 ### Docker ###
 tests/openid_conformance/exports/*.zip
 compose.override.yml
+
+### LLMs and "coding assistants" ###
+.claude
+.codex
+.gemini
+.cursor
+AGENTS.md
+CLAUDE.md
+QWEN.md
+
diff --git a/web/package.json b/web/package.json
index 88cf801ac89e..153abb9fe7f7 100644
--- a/web/package.json
+++ b/web/package.json
@@ -246,7 +246,7 @@
             }
         },
         "build-proxy": {
-            "command": "node scripts/build-web.mjs --proxy",
+            "command": "node scripts/build-web.mjs --styles-only",
             "dependencies": [
                 "build-locales"
             ]
diff --git a/web/scripts/build-web.mjs b/web/scripts/build-web.mjs
index b13ea1282aaf..423fc7dfbe8f 100644
--- a/web/scripts/build-web.mjs
+++ b/web/scripts/build-web.mjs
@@ -22,7 +22,6 @@ import { NodeEnvironment } from "@goauthentik/core/environment/node";
 import { MonoRepoRoot } from "@goauthentik/core/paths/node";
 import { BuildIdentifier } from "@goauthentik/core/version/node";
 
-import { deepmerge } from "deepmerge-ts";
 import esbuild from "esbuild";
 
 /// <reference types="../types/esbuild.js" />
@@ -52,9 +51,53 @@ const assets = [
     [path.resolve(PackageRoot, "icons"), "./assets/icons"],
 ];
 
+const entryPointNames = Object.keys(EntryPoint);
+const entryPoints = Object.values(EntryPoint);
+const entryPointsDescription = entryPointNames.join("\n\t");
+
 /**
- * @type {Readonly<BuildOptions>}
+ * @type {Readonly<BuildOptions["plugins"]>}
  */
+const BASE_ESBUILD_PLUGINS = [
+    {
+        name: "copy",
+        setup(build) {
+            build.onEnd(async () => {
+                /**
+                 * @type {import('esbuild').PartialMessage[]}
+                 */
+                const errors = [];
+
+                /**
+                 * @param {SourceDestinationPair} pair
+                 */
+                const copy = ([from, to]) => {
+                    const resolvedDestination = path.resolve(DistDirectory, to);
+
+                    logger.debug(`📋 Copying assets from ${from} to ${to}`);
+
+                    return fs.cp(from, resolvedDestination, { recursive: true }).catch((error) => {
+                        errors.push({
+                            text: `Failed to copy assets from ${from} to ${to}: ${error}`,
+                            location: {
+                                file: from,
+                            },
+                        });
+                    });
+                };
+
+                await Promise.all(assets.map(copy));
+
+                return { errors };
+            });
+        },
+    },
+
+    mdxPlugin({
+        root: MonoRepoRoot,
+    }),
+];
+
 const BASE_ESBUILD_OPTIONS = {
     entryNames: `[dir]/[name]-${BuildIdentifier}`,
     chunkNames: "[dir]/chunks/[hash]",
@@ -84,60 +127,28 @@ const BASE_ESBUILD_OPTIONS = {
      * @see https://nodejs.org/api/packages.html#packages_conditional_exports
      */
     conditions: NodeEnvironment === "production" ? ["production"] : ["development", "production"],
-    plugins: [
-        {
-            name: "copy",
-            setup(build) {
-                build.onEnd(async () => {
-                    /**
-                     * @type {import('esbuild').PartialMessage[]}
-                     */
-                    const errors = [];
-
-                    /**
-                     * @param {SourceDestinationPair} pair
-                     */
-                    const copy = ([from, to]) => {
-                        const resolvedDestination = path.resolve(DistDirectory, to);
-
-                        logger.debug(`📋 Copying assets from ${from} to ${to}`);
-
-                        return fs
-                            .cp(from, resolvedDestination, { recursive: true })
-                            .catch((error) => {
-                                errors.push({
-                                    text: `Failed to copy assets from ${from} to ${to}: ${error}`,
-                                    location: {
-                                        file: from,
-                                    },
-                                });
-                            });
-                    };
-
-                    await Promise.all(assets.map(copy));
-
-                    return { errors };
-                });
-            },
-        },
-
-        mdxPlugin({
-            root: MonoRepoRoot,
-        }),
-    ],
+    plugins: BASE_ESBUILD_PLUGINS,
     define: bundleDefinitions,
     format: "esm",
-    logOverride: {
-        /**
-         * HACK: Silences issue originating in ESBuild.
-         *
-         * @see {@link https://github.com/evanw/esbuild/blob/b914dd30294346aa15fcc04278f4b4b51b8b43b5/internal/logger/msg_ids.go#L211 ESBuild source}
-         * @expires 2025-08-11
-         */
-        "invalid-source-url": "silent",
-    },
 };
 
+/**
+ * Creates an ESBuild options, extending the base options with the given overrides.
+ *
+ * @param {BuildOptions["entryPoints"]} entryPoints
+ * @param {BuildOptions["plugins"]} plugins
+ * @returns {BuildOptions}
+ */
+export function createESBuildOptions(entryPoints, plugIns = []) {
+    const plugins = [...BASE_ESBUILD_PLUGINS, ...plugIns];
+
+    return {
+        ...BASE_ESBUILD_OPTIONS,
+        entryPoints,
+        plugins,
+    };
+}
+
 async function cleanDistDirectory() {
     logger.info(`♻️ Cleaning previous builds...`);
 
@@ -153,29 +164,12 @@ async function cleanDistDirectory() {
     logger.info(`♻️ Done!`);
 }
 
-/**
- * Creates an ESBuild options, extending the base options with the given overrides.
- *
- * @param {BuildOptions} overrides
- * @returns {BuildOptions}
- */
-export function createESBuildOptions(overrides) {
-    /**
-     * @type {BuildOptions}
-     */
-    const mergedOptions = deepmerge(BASE_ESBUILD_OPTIONS, overrides);
-
-    return mergedOptions;
-}
-
 function doHelp() {
     logger.info(`Build the authentik UI
 
         options:
             -w, --watch: Build all interfaces
-            -p, --proxy: Build only the polyfills and the loading application
-            -h, --help: This help message
-`);
+            -s, --styles-only: Build the static CSS`);
 
     process.exit(0);
 }
@@ -185,9 +179,7 @@ function doHelp() {
  * @returns {Promise<() => Promise<void>>} dispose
  */
 async function doWatch() {
-    logger.info(`🤖 Watching entry points:\n\t${Object.keys(EntryPoint).join("\n\t")}`);
-
-    const entryPoints = Object.values(EntryPoint);
+    logger.info(`🤖 Watching entry points:\n\t${entryPointsDescription}`);
 
     const developmentPlugins = await import("@goauthentik/esbuild-plugin-live-reload/plugin")
         .then(({ liveReloadPlugin }) => [
@@ -198,10 +190,10 @@ async function doWatch() {
         ])
         .catch(() => []);
 
-    const buildOptions = createESBuildOptions({
-        entryPoints,
-        plugins: [...developmentPlugins, styleLoaderPlugin({ logger, watch: true })],
-    });
+    const buildOptions = createESBuildOptions(entryPoints, [
+        ...developmentPlugins,
+        styleLoaderPlugin({ logger, watch: true }),
+    ]);
 
     const buildContext = await esbuild.context(buildOptions);
 
@@ -228,14 +220,9 @@ async function doWatch() {
 }
 
 async function doBuild() {
-    logger.info(`🤖 Building entry points:\n\t${Object.keys(EntryPoint).join("\n\t")}`);
+    logger.info(`🤖 Building entry points:\n\t${entryPointsDescription}`);
 
-    const entryPoints = Object.values(EntryPoint);
-
-    const buildOptions = createESBuildOptions({
-        entryPoints,
-        plugins: [styleLoaderPlugin({ logger })],
-    });
+    const buildOptions = createESBuildOptions(entryPoints, [styleLoaderPlugin({ logger })]);
 
     await esbuild.build(buildOptions);
 
@@ -244,11 +231,7 @@ async function doBuild() {
 
 async function doProxy() {
     const entryPoints = [EntryPoint.InterfaceStyles, EntryPoint.StaticStyles];
-
-    const buildOptions = createESBuildOptions({
-        entryPoints,
-        plugins: [styleLoaderPlugin({ logger })],
-    });
+    const buildOptions = createESBuildOptions(entryPoints, [styleLoaderPlugin({ logger })]);
 
     await esbuild.build(buildOptions);
     logger.info("Proxy build complete");
@@ -265,8 +248,8 @@ async function delegateCommand() {
         case "--watch":
             return doWatch();
         // There's no watch-for-proxy, sorry.
-        case "-p":
-        case "--proxy":
+        case "-s":
+        case "--styles-only":
             return doProxy();
         default:
             return doBuild();

From 6eaf23cd6dfd18bff2be862be00d2ae3e9892bb9 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Wed, 4 Mar 2026 07:41:31 -0800
Subject: [PATCH 2/9] Did I miss something?

---
 web/scripts/build-web.mjs | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/scripts/build-web.mjs b/web/scripts/build-web.mjs
index 423fc7dfbe8f..78924f2d2eda 100644
--- a/web/scripts/build-web.mjs
+++ b/web/scripts/build-web.mjs
@@ -10,7 +10,7 @@ import * as path from "node:path";
 /**
  * @file ESBuild script for building the authentik web UI.
  *
- * @import { BuildOptions } from "esbuild";
+ * @import { BuildOptions, Plugin } from "esbuild";
  */
 import { mdxPlugin } from "#bundler/mdx-plugin/node";
 import { styleLoaderPlugin } from "#bundler/style-loader-plugin/node";
@@ -56,7 +56,7 @@ const entryPoints = Object.values(EntryPoint);
 const entryPointsDescription = entryPointNames.join("\n\t");
 
 /**
- * @type {Readonly<BuildOptions["plugins"]>}
+ * @type {Plugin[]}
  */
 const BASE_ESBUILD_PLUGINS = [
     {
@@ -98,6 +98,9 @@ const BASE_ESBUILD_PLUGINS = [
     }),
 ];
 
+/**
+ * @type {BuildOptions}
+ */
 const BASE_ESBUILD_OPTIONS = {
     entryNames: `[dir]/[name]-${BuildIdentifier}`,
     chunkNames: "[dir]/chunks/[hash]",
@@ -136,7 +139,7 @@ const BASE_ESBUILD_OPTIONS = {
  * Creates an ESBuild options, extending the base options with the given overrides.
  *
  * @param {BuildOptions["entryPoints"]} entryPoints
- * @param {BuildOptions["plugins"]} plugins
+ * @param {Plugin[]} plugIns
  * @returns {BuildOptions}
  */
 export function createESBuildOptions(entryPoints, plugIns = []) {

From 7f9f2a13c21f975f88ee1d9937da02f0afa0d832 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Wed, 11 Mar 2026 09:56:34 -0700
Subject: [PATCH 3/9] That was a stupid spelling error.

---
 web/paths/node.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/paths/node.js b/web/paths/node.js
index 0f43c069b811..b94fe2a44e26 100644
--- a/web/paths/node.js
+++ b/web/paths/node.js
@@ -90,7 +90,7 @@ export const EntryPoint = /** @type {const} */ ({
         in: resolve(PackageRoot, "src", "styles", "authentik", "static.global.css"),
         out: resolve(DistDirectory, "styles", "static"),
     },
-    FlowsStyles: {
+    FlowStyles: {
         in: resolve(PackageRoot, "src", "styles", "authentik", "flows.global.css"),
         out: resolve(DistDirectory, "styles", "flow"),
     },

From ea98b059e7a6cdd79a8016e4ef4749017533a29c Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 10 Apr 2026 17:13:08 -0700
Subject: [PATCH 4/9] ## What
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extend ak-drawer to comply with the full specification; port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems directly responsible for the Drawer into the CSS.

## Why

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.

## Details

The Drawer’s internal CSS is now entirely within the Lit framework; the controlling CSS is namespaced to `ak-v2-c--drawer` and placed into the global CSS. Every bit of the drawer has a `part` name, so it can be customized to your heart’s content.

Added stylelint to make sure I’m doing this correctly.
---
 web/package-lock.json                         | 1079 ++++++++++++++++-
 web/package.json                              |    8 +
 .../elements/ak-drawer/ak-drawer.component.ts |   98 +-
 web/src/elements/ak-drawer/ak-drawer.css      |   40 -
 web/src/elements/ak-drawer/ak-drawer.root.css |  141 +++
 .../elements/ak-drawer/ak-drawer.stories.ts   |  169 +++
 .../elements/ak-drawer/ak-drawer.styles.ts    |  914 ++++++++++++++
 web/src/elements/ak-drawer/ak-drawer.ts       |    8 +-
 .../ak-drawer/drawerResizeController.ts       |  195 +++
 web/src/flow/inspector/FlowInspectorButton.ts |    4 +-
 web/src/styles/authentik/base/variables.css   |   86 +-
 web/src/styles/authentik/flows.global.css     |    1 +
 web/stylelint.config.mjs                      |   20 +
 13 files changed, 2678 insertions(+), 85 deletions(-)
 delete mode 100644 web/src/elements/ak-drawer/ak-drawer.css
 create mode 100644 web/src/elements/ak-drawer/ak-drawer.root.css
 create mode 100644 web/src/elements/ak-drawer/ak-drawer.stories.ts
 create mode 100644 web/src/elements/ak-drawer/ak-drawer.styles.ts
 create mode 100644 web/src/elements/ak-drawer/drawerResizeController.ts
 create mode 100644 web/stylelint.config.mjs

diff --git a/web/package-lock.json b/web/package-lock.json
index 04a87f213d0a..d4ddd7842259 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -120,6 +120,11 @@
                 "wireit": "^0.14.12",
                 "yaml": "^2.8.3"
             },
+            "devDependencies": {
+                "postcss-lit": "^1.4.1",
+                "stylelint": "^17.6.0",
+                "stylelint-config-standard": "^40.0.0"
+            },
             "engines": {
                 "node": ">=24",
                 "npm": ">=11.6.2"
@@ -429,6 +434,67 @@
             "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@keyv/serialize": "^1.1.1"
+            }
+        },
         "node_modules/@chevrotain/cst-dts-gen": {
             "version": "11.1.2",
             "resolved": "https://registry.npmjs.org/@chevrotain/cst-dts-gen/-/cst-dts-gen-11.1.2.tgz",
@@ -642,6 +708,168 @@
                 "w3c-keyname": "^2.2.4"
             }
         },
+        "node_modules/@csstools/css-calc": {
+            "version": "3.1.1",
+            "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-3.1.1.tgz",
+            "integrity": "sha512-HJ26Z/vmsZQqs/o3a6bgKslXGFAungXGbinULZO3eMsOyNJHeBBZfup5FiZInOghgoM4Hwnmw+OgbJCNg1wwUQ==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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.2",
+            "resolved": "https://registry.npmjs.org/@csstools/css-syntax-patches-for-csstree/-/css-syntax-patches-for-csstree-1.1.2.tgz",
+            "integrity": "sha512-5GkLzz4prTIpoyeUiIu3iV6CSG3Plo7xRVOFPKI7FVEJ3mZ0A8SwK0XU3Gl7xAkiQ+mDyam+NNp875/C5y+jSA==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
@@ -6497,6 +6725,16 @@
                 "node": ">=4"
             }
         },
+        "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==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/astring": {
             "version": "1.9.0",
             "resolved": "https://registry.npmjs.org/astring/-/astring-1.9.0.tgz",
@@ -6954,6 +7192,20 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/cacheable": {
+            "version": "2.3.4",
+            "resolved": "https://registry.npmjs.org/cacheable/-/cacheable-2.3.4.tgz",
+            "integrity": "sha512-djgxybDbw9fL/ZWMI3+CE8ZilNxcwFkVtDc1gJ+IlOSSWkSMPQabhV/XCHTQ6pwwN6aivXPZ43omTooZiX06Ew==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@cacheable/memory": "^2.0.8",
+                "@cacheable/utils": "^2.4.0",
+                "hookified": "^1.15.0",
+                "keyv": "^5.6.0",
+                "qified": "^0.9.0"
+            }
+        },
         "node_modules/cacheable-lookup": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz",
@@ -7006,6 +7258,16 @@
                 "@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==",
+            "dev": true,
+            "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",
@@ -7352,6 +7614,13 @@
             "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/colorette": {
             "version": "2.0.20",
             "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -7476,6 +7745,52 @@
                 "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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.15",
             "resolved": "https://registry.npmjs.org/country-flag-icons/-/country-flag-icons-1.6.15.tgz",
@@ -7502,6 +7817,30 @@
                 "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
@@ -7514,6 +7853,19 @@
             "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==",
+            "dev": true,
+            "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",
@@ -8470,6 +8822,16 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -9434,24 +9796,51 @@
             "integrity": "sha512-W+KJc2dmILlPplD/H4K9l9LcAHAfPtP6BY84uVLXQ6Evcz9Lcg33Y2z1IVblT6xdY54PXYVHEv+0Wpq8Io6zkA==",
             "license": "MIT"
         },
-        "node_modules/fastq": {
-            "version": "1.20.1",
-            "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
-            "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
-            "license": "ISC",
-            "dependencies": {
-                "reusify": "^1.0.4"
-            }
-        },
-        "node_modules/fault": {
-            "version": "2.0.1",
-            "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
-            "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
-            "license": "MIT",
-            "dependencies": {
-                "format": "^0.2.0"
-            },
-            "funding": {
+        "node_modules/fast-uri": {
+            "version": "3.1.0",
+            "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.1.0.tgz",
+            "integrity": "sha512-iPeeDKJSWf4IEOasVVrknXpaBV0IApz/gp7S2bb7Z4Lljbl2MGJRqInZiUrQwV16cpzw/D3S5j5Julj/gT52AA==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
+            "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+            "license": "ISC",
+            "dependencies": {
+                "reusify": "^1.0.4"
+            }
+        },
+        "node_modules/fault": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/fault/-/fault-2.0.1.tgz",
+            "integrity": "sha512-WtySTkS4OKev5JtpHXnib4Gxiurzh5NCGvWrFaZ34m6JehfTUhKZvn9njTfw48t6JumVQOmrKqpmGcdwxnhqBQ==",
+            "license": "MIT",
+            "dependencies": {
+                "format": "^0.2.0"
+            },
+            "funding": {
                 "type": "github",
                 "url": "https://github.com/sponsors/wooorm"
             }
@@ -9955,6 +10344,19 @@
                 "node": "6.* || 8.* || >= 10.*"
             }
         },
+        "node_modules/get-east-asian-width": {
+            "version": "1.5.0",
+            "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
+            "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
+            "dev": true,
+            "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",
@@ -10073,6 +10475,47 @@
                 "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "license": "ISC",
+            "dependencies": {
+                "isexe": "^2.0.0"
+            },
+            "bin": {
+                "which": "bin/which"
+            }
+        },
         "node_modules/globals": {
             "version": "17.4.0",
             "resolved": "https://registry.npmjs.org/globals/-/globals-17.4.0.tgz",
@@ -10130,6 +10573,13 @@
                 "node": ">= 4"
             }
         },
+        "node_modules/globjoin": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+            "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/gopd": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
@@ -10282,6 +10732,19 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -10543,12 +11006,32 @@
                 "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
@@ -10690,6 +11173,17 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -10708,6 +11202,13 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -11146,6 +11647,16 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -11468,6 +11979,13 @@
             "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==",
+            "dev": true,
+            "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",
@@ -11944,6 +12462,26 @@
                 "url": "https://opencollective.com/parcel"
             }
         },
+        "node_modules/lilconfig": {
+            "version": "3.1.3",
+            "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+            "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antonk52"
+            }
+        },
+        "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/lit": {
             "version": "3.3.2",
             "resolved": "https://registry.npmjs.org/lit/-/lit-3.3.2.tgz",
@@ -12126,6 +12664,13 @@
             "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/log4js": {
             "version": "6.9.1",
             "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.9.1.tgz",
@@ -12303,6 +12848,17 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -12662,6 +13218,13 @@
                 "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==",
+            "dev": true,
+            "license": "CC0-1.0"
+        },
         "node_modules/memorystream": {
             "version": "0.3.1",
             "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz",
@@ -12670,6 +13233,19 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -14861,6 +15437,114 @@
                 "node": "^10 || ^12 || >=14"
             }
         },
+        "node_modules/postcss-lit": {
+            "version": "1.4.1",
+            "resolved": "https://registry.npmjs.org/postcss-lit/-/postcss-lit-1.4.1.tgz",
+            "integrity": "sha512-n3eVDvF7uyMEcxDVVBrOisB7MhkE1btqfQRALZZCeCFURn7sRoElzQa7/KfHeLhoSrkwBPLmZx0mCnoxHDI9lA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "@babel/generator": "^7.29.1",
+                "@babel/parser": "^7.16.2",
+                "@babel/traverse": "^7.29.0",
+                "lilconfig": "^3.1.3",
+                "postcss-load-config": "^6.0.1"
+            },
+            "peerDependencies": {
+                "postcss": "^8.3.11"
+            }
+        },
+        "node_modules/postcss-load-config": {
+            "version": "6.0.1",
+            "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+            "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/postcss/"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/ai"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "lilconfig": "^3.1.1"
+            },
+            "engines": {
+                "node": ">= 18"
+            },
+            "peerDependencies": {
+                "jiti": ">=1.21.0",
+                "postcss": ">=8.0.9",
+                "tsx": "^4.8.1",
+                "yaml": "^2.4.2"
+            },
+            "peerDependenciesMeta": {
+                "jiti": {
+                    "optional": true
+                },
+                "postcss": {
+                    "optional": true
+                },
+                "tsx": {
+                    "optional": true
+                },
+                "yaml": {
+                    "optional": true
+                }
+            }
+        },
+        "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/prelude-ls": {
             "version": "1.2.1",
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -15105,6 +15789,26 @@
                 "node": ">=6"
             }
         },
+        "node_modules/qified": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/qified/-/qified-0.9.1.tgz",
+            "integrity": "sha512-n7mar4T0xQ+39dE2vGTAlbxUEpndwPANH0kDef1/MYsB8Bba9wshkybIRx74qgcvKQPEWErf9AqAdYjhzY2Ilg==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "hookified": "^2.1.1"
+            },
+            "engines": {
+                "node": ">=20"
+            }
+        },
+        "node_modules/qified/node_modules/hookified": {
+            "version": "2.1.1",
+            "resolved": "https://registry.npmjs.org/hookified/-/hookified-2.1.1.tgz",
+            "integrity": "sha512-AHb76R16GB5EsPBE2J7Ko5kiEyXwviB9P5SMrAKcuAu4vJPZttViAbj9+tZeaQE5zjDme+1vcHP78Yj/WoAveA==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/qrjs": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/qrjs/-/qrjs-0.2.0.tgz",
@@ -15704,6 +16408,16 @@
                 "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==",
+            "dev": true,
+            "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",
@@ -16315,6 +17029,24 @@
                 "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==",
+            "dev": true,
+            "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/smart-buffer": {
             "version": "4.2.0",
             "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -17428,6 +18160,194 @@
                 "inline-style-parser": "0.2.7"
             }
         },
+        "node_modules/stylelint": {
+            "version": "17.6.0",
+            "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-17.6.0.tgz",
+            "integrity": "sha512-tokrsMIVAR9vAQ/q3UVEr7S0dGXCi7zkCezPRnS2kqPUulvUh5Vgfwngrk4EoAoW7wnrThqTdnTFN5Ra7CaxIg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/stylelint"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/stylelint"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "@csstools/css-calc": "^3.1.1",
+                "@csstools/css-parser-algorithms": "^4.0.0",
+                "@csstools/css-syntax-patches-for-csstree": "^1.1.1",
+                "@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.1.1",
+                "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.8",
+                "postcss-safe-parser": "^7.0.1",
+                "postcss-selector-parser": "^7.1.1",
+                "postcss-value-parser": "^4.2.0",
+                "string-width": "^8.2.0",
+                "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-config-recommended": {
+            "version": "18.0.0",
+            "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-18.0.0.tgz",
+            "integrity": "sha512-mxgT2XY6YZ3HWWe3Di8umG6aBmWmHTblTgu/f10rqFXnyWxjKWwNdjSWkgkwCtxIKnqjSJzvFmPT5yabVIRxZg==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/stylelint"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/stylelint"
+                }
+            ],
+            "license": "MIT",
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "stylelint": "^17.0.0"
+            }
+        },
+        "node_modules/stylelint-config-standard": {
+            "version": "40.0.0",
+            "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-40.0.0.tgz",
+            "integrity": "sha512-EznGJxOUhtWck2r6dJpbgAdPATIzvpLdK9+i5qPd4Lx70es66TkBPljSg4wN3Qnc6c4h2n+WbUrUynQ3fanjHw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/stylelint"
+                },
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/stylelint"
+                }
+            ],
+            "license": "MIT",
+            "dependencies": {
+                "stylelint-config-recommended": "^18.0.0"
+            },
+            "engines": {
+                "node": ">=20.19.0"
+            },
+            "peerDependencies": {
+                "stylelint": "^17.0.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==",
+            "dev": true,
+            "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.2",
+            "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-11.1.2.tgz",
+            "integrity": "sha512-N2WFfK12gmrK1c1GXOqiAJ1tc5YE+R53zvQ+t5P8S5XhnmKYVB5eZEiLNZKDSmoG8wqqbF9EXYBBW/nef19log==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "flat-cache": "^6.1.20"
+            }
+        },
+        "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
+        "node_modules/stylelint/node_modules/string-width": {
+            "version": "8.2.0",
+            "resolved": "https://registry.npmjs.org/string-width/-/string-width-8.2.0.tgz",
+            "integrity": "sha512-6hJPQ8N0V0P3SNmP6h2J99RLuzrWz2gvT7VnK5tKvrNqJoyS9W4/Fb8mo31UiPvy00z7DQXkP2hnKBVav76thw==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
@@ -17463,6 +18383,49 @@
                 "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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",
@@ -17475,6 +18438,12 @@
                 "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==",
+            "dev": true
+        },
         "node_modules/swagger-client": {
             "version": "3.37.1",
             "resolved": "https://registry.npmjs.org/swagger-client/-/swagger-client-3.37.1.tgz",
@@ -17502,6 +18471,47 @@
                 "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==",
+            "dev": true,
+            "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.18.0",
+            "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
+            "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/tagged-tag": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/tagged-tag/-/tagged-tag-1.0.0.tgz",
@@ -18318,6 +19328,13 @@
                 "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==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/utility-types": {
             "version": "3.11.0",
             "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
@@ -18996,6 +20013,32 @@
             "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==",
+            "dev": true,
+            "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==",
+            "dev": true,
+            "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 439d9c36160f..d6fa88918d3b 100644
--- a/web/package.json
+++ b/web/package.json
@@ -12,8 +12,11 @@
         "extract-locales": "lit-localize extract",
         "format": "wireit",
         "lint": "eslint --fix .",
+        "lint:css": "stylelint ./src/**/*.css",
+        "lint:css-in-js": "stylelint --custom-syntax postcss-lit ./src/**/*.styles.ts",
         "lint:imports": "knip --config scripts/knip.config.ts",
         "lint:lockfile": "wireit",
+        "lint:styles": "run-p lint:css lint:css-in-js",
         "lint:types": "wireit",
         "lint-check": "eslint --max-warnings 0 .",
         "lit-analyse": "wireit",
@@ -195,6 +198,11 @@
         "wireit": "^0.14.12",
         "yaml": "^2.8.3"
     },
+    "devDependencies": {
+        "postcss-lit": "^1.4.1",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0"
+    },
     "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.28.0",
         "@esbuild/linux-arm64": "^0.28.0",
diff --git a/web/src/elements/ak-drawer/ak-drawer.component.ts b/web/src/elements/ak-drawer/ak-drawer.component.ts
index 92be37e50603..f99deb91e231 100644
--- a/web/src/elements/ak-drawer/ak-drawer.component.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.component.ts
@@ -1,32 +1,70 @@
-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;
+
+    constructor(expanded: boolean | null = null) {
+        super(DrawerExpandRequest.eventName, { bubbles: true, composed: true });
+        this.expanded = expanded;
+    }
+}
+
+export class AkDrawer extends LitElement {
+    static readonly styles = [AKDrawer];
 
-export class Drawer extends AKElement {
-    static readonly styles = [PFDrawer, Style];
+    @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;
+
+    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 +72,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 bdd00ca3637b..000000000000
--- 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 000000000000..6a4aeacecac9
--- /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 000000000000..cc09da4d1b79
--- /dev/null
+++ b/web/src/elements/ak-drawer/ak-drawer.stories.ts
@@ -0,0 +1,169 @@
+import "./ak-drawer";
+
+import { DrawerExpandRequest } from "./ak-drawer.component";
+
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+
+import { html } 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: populate it by creating 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>
+`;
+
+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,
+        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)}
+        >
+            ${args.content} ${args.panel}
+        </ak-drawer>`;
+    },
+};
+
+export const Default: Story = {
+    render: () => html` <ak-drawer> ${contentBlock} ${panelBlock} </ak-drawer> `,
+};
+
+export const Expanded: Story = {
+    ...Template,
+    args: {
+        ...Template.args,
+        expanded: true,
+    },
+};
+
+export const PanelLeft: Story = {
+    name: "Panel Left",
+    render: () => html`
+        <ak-drawer expanded position="left"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
+
+export const PanelBottom: Story = {
+    name: "Panel Bottom",
+    render: () => html`
+        <ak-drawer expanded position="bottom"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
+
+export const Inline: Story = {
+    render: () => html` <ak-drawer expanded inline> ${contentBlock} ${panelBlock} </ak-drawer> `,
+};
+
+export const Static: Story = {
+    render: () => html` <ak-drawer expanded static> ${contentBlock} ${panelBlock} </ak-drawer> `,
+};
+
+export const Resizable: Story = {
+    render: () => html` <ak-drawer expanded resizable> ${contentBlock} ${panelBlock} </ak-drawer> `,
+};
+
+export const ResizableLeft: Story = {
+    render: () => html`
+        <ak-drawer expanded resizable position="left"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
+
+export const ResizableBottom: Story = {
+    render: () => html`
+        <ak-drawer expanded resizable position="bottom"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
+
+export const CustomWidth: Story = {
+    name: "Custom Width",
+    render: () => html`
+        <ak-drawer expanded width="33"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
+
+export const ResponsiveWidth: Story = {
+    name: "Responsive Width",
+    render: () => html`
+        <ak-drawer expanded width="75-on-xl"> ${contentBlock} ${panelBlock} </ak-drawer>
+    `,
+};
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 000000000000..87d846fbcffc
--- /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 12475370fe34..b54c8bfb4b53 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 000000000000..600bd28fa241
--- /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 800bb3677efc..efde4af5c3a4 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 020fa7bbe3e4..cb48eaf6aa45 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 9d0636a10d4f..c5db595bbf56 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/stylelint.config.mjs b/web/stylelint.config.mjs
new file mode 100644
index 000000000000..3e63d87a7fc4
--- /dev/null
+++ b/web/stylelint.config.mjs
@@ -0,0 +1,20 @@
+/** @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: (selector) => `Expected class selector "${selector}" to be kebab-case`,
+            },
+        ],
+        "declaration-empty-line-before": null,
+        "media-feature-range-notation": null,
+    },
+};

From c96b78ceb088d04289f08be4510a6e8fb627022a Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 10 Apr 2026 17:16:57 -0700
Subject: [PATCH 5/9] TSC (!) had opinions.

---
 web/stylelint.config.mjs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/web/stylelint.config.mjs b/web/stylelint.config.mjs
index 3e63d87a7fc4..85aaece3c79f 100644
--- a/web/stylelint.config.mjs
+++ b/web/stylelint.config.mjs
@@ -11,7 +11,8 @@ export default {
         "selector-class-pattern": [
             "^([a-z][a-z0-9]*)((__?|-)[A-Za-z0-9]+)*$",
             {
-                message: (selector) => `Expected class selector "${selector}" to be kebab-case`,
+                message: (/** @type {string} */ selector) =>
+                    `Expected class selector "${selector}" to be kebab-case`,
             },
         ],
         "declaration-empty-line-before": null,

From 3141537d9e2377febed1fa66216fde49735bc0ac Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 10 Apr 2026 17:20:55 -0700
Subject: [PATCH 6/9] Re-arranged to avoid having a 'devDependencies' block.

---
 web/package.json | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/web/package.json b/web/package.json
index d6fa88918d3b..4fe325ec2988 100644
--- a/web/package.json
+++ b/web/package.json
@@ -169,6 +169,7 @@
         "pino": "^10.3.1",
         "pino-pretty": "^13.1.2",
         "playwright": "^1.58.2",
+        "postcss-lit": "^1.4.1",
         "prettier": "^3.8.1",
         "prettier-plugin-packagejson": "^3.0.2",
         "pseudolocale": "^2.2.0",
@@ -185,6 +186,8 @@
         "remark-mdx-frontmatter": "^5.2.0",
         "storybook": "^10.2.1",
         "style-mod": "^4.1.3",
+        "stylelint": "^17.6.0",
+        "stylelint-config-standard": "^40.0.0",
         "trusted-types": "^2.0.0",
         "ts-pattern": "^5.9.0",
         "turnstile-types": "^1.2.3",
@@ -198,11 +201,6 @@
         "wireit": "^0.14.12",
         "yaml": "^2.8.3"
     },
-    "devDependencies": {
-        "postcss-lit": "^1.4.1",
-        "stylelint": "^17.6.0",
-        "stylelint-config-standard": "^40.0.0"
-    },
     "optionalDependencies": {
         "@esbuild/darwin-arm64": "^0.28.0",
         "@esbuild/linux-arm64": "^0.28.0",

From b0b4a2a9466cef9e351fe9d44ed99aba36372284 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Fri, 10 Apr 2026 17:22:03 -0700
Subject: [PATCH 7/9] Nobody liked this choice.

---
 .gitignore | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/.gitignore b/.gitignore
index 89e150b44089..d7e2edd43d65 100644
--- a/.gitignore
+++ b/.gitignore
@@ -233,13 +233,3 @@ source_docs/
 ### Docker ###
 tests/openid_conformance/exports/*.zip
 compose.override.yml
-
-### LLMs and "coding assistants" ###
-.claude
-.codex
-.gemini
-.cursor
-AGENTS.md
-CLAUDE.md
-QWEN.md
-

From 72294bdb4c86b9de6cc5c957126cde6f73739076 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Mon, 13 Apr 2026 09:10:52 -0700
Subject: [PATCH 8/9] Extend ak-drawer to comply with the full specification;
 port ak-drawer to use Patternfly 5; vendor the Patternfly 5 subsystems
 directly responsible for the Drawer into the CSS.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This drawer is completely independent of Patternfly 4; it brings everything in-house, everything is under `ak-v2-c-drawer`, and we read our variables from `ak-v2-global` entries as part of the style folder.

The contents of the folder are slotted, so they’re part of the parent DOM and parent CSS context, and can be controlled from there without having to do any magic on the Drawer.

To comply with the standards of the HTML disclosure pattern, the drawer uses `expanded` instead of `open`; it listens for an event to trigger open/close; it emits a `toggle` event when completed. Shortcoming: to completely comply with the disclosure pattern, it should emit a `beforeToggle` to let other clients intercept the request and prevent it from happening, but we don’t do that yet.

Unlike the previous drawer, this one has `resizable`, `position`, `inline/static`, and responsive width breakpoints, all features of the Patternfly 5 React web-component. The resizable variant gives you a visible handle, and even responds to keyborad controls.

Along with the native control through CSS Custom Properties, every part of the component has a `part` declaration, so if you *really* want to customize the thing that’s now possible.

Unlike the Patternfly 5 React version, we impose **no** structure on the internals of the component; no padding, no margin, no header/main/footer segmentation. That pattern is universal, and doesn’t need to be specified for each and every component. If you need that, build it into whatever element you put into the unnamed “main” or `panel` slots.

There is a comprehensive Storybook story page for the component.

To meet the requirements of the Drawer, of the LightDOM project, and of the Patternfly 5 vendoring port.
---
 .../elements/ak-drawer/ak-drawer.component.ts |  5 +-
 .../elements/ak-drawer/ak-drawer.stories.ts   | 76 +++++++------------
 web/src/styles/authentik/static.global.css    |  1 +
 3 files changed, 34 insertions(+), 48 deletions(-)

diff --git a/web/src/elements/ak-drawer/ak-drawer.component.ts b/web/src/elements/ak-drawer/ak-drawer.component.ts
index f99deb91e231..03c2213d5897 100644
--- a/web/src/elements/ak-drawer/ak-drawer.component.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.component.ts
@@ -26,6 +26,9 @@ export class AkDrawer extends LitElement {
     @property({ type: Boolean, reflect: true })
     public resizing = false;
 
+    @property({ type: String, reflect: true })
+    public width = "33";
+
     private resize = new DrawerResizeController(this);
 
     onDrawerRequest = (ev: DrawerExpandRequest) => {
@@ -84,7 +87,7 @@ export class AkDrawer extends LitElement {
                 new ToggleEvent("toggle", {
                     newState: expandedMsg(this.expanded),
                     oldState: expandedMsg(expanded),
-                }),
+                })
             );
         }
     }
diff --git a/web/src/elements/ak-drawer/ak-drawer.stories.ts b/web/src/elements/ak-drawer/ak-drawer.stories.ts
index cc09da4d1b79..07ae18fa581b 100644
--- a/web/src/elements/ak-drawer/ak-drawer.stories.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.stories.ts
@@ -17,7 +17,7 @@ const contentBlock = html`
         <h2>Main Content</h2>
         <p><button @click=${toggle}>Toggle Drawer</button></p>
         <p>
-            This is the drawer's main: populate it by creating slotted content without a slot name.
+            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>
@@ -53,6 +53,17 @@ const panelBlock = html`
     </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",
@@ -88,6 +99,7 @@ const Template: Story = {
         inline: false,
         static: false,
         resizable: false,
+        width: undefined,
         position: undefined,
         content: contentBlock,
         panel: panelBlock,
@@ -98,6 +110,7 @@ const Template: Story = {
             ?inline=${args.inline}
             ?resizable=${args.resizable}
             position=${ifDefined(args.position)}
+            width=${ifDefined(args.width)}
         >
             ${args.content} ${args.panel}
         </ak-drawer>`;
@@ -108,62 +121,31 @@ export const Default: Story = {
     render: () => html` <ak-drawer> ${contentBlock} ${panelBlock} </ak-drawer> `,
 };
 
-export const Expanded: Story = {
+export const story = (args: DrawerProps = {}, name?: string): Story => ({
     ...Template,
+    ...(name ? { name } : {}),
     args: {
         ...Template.args,
-        expanded: true,
+        ...args,
     },
-};
+});
 
-export const PanelLeft: Story = {
-    name: "Panel Left",
-    render: () => html`
-        <ak-drawer expanded position="left"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const Expanded: Story = story({ expanded: true });
 
-export const PanelBottom: Story = {
-    name: "Panel Bottom",
-    render: () => html`
-        <ak-drawer expanded position="bottom"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const PanelLeft: Story = story({ expanded: true, position: "left" });
 
-export const Inline: Story = {
-    render: () => html` <ak-drawer expanded inline> ${contentBlock} ${panelBlock} </ak-drawer> `,
-};
+export const PanelBottom = story({ expanded: true, position: "bottom" });
 
-export const Static: Story = {
-    render: () => html` <ak-drawer expanded static> ${contentBlock} ${panelBlock} </ak-drawer> `,
-};
+export const Inline = story({ expanded: true, inline: true });
 
-export const Resizable: Story = {
-    render: () => html` <ak-drawer expanded resizable> ${contentBlock} ${panelBlock} </ak-drawer> `,
-};
+export const Static = story({ expanded: true, static: true });
 
-export const ResizableLeft: Story = {
-    render: () => html`
-        <ak-drawer expanded resizable position="left"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const Resizable = story({ expanded: true, resizable: true });
 
-export const ResizableBottom: Story = {
-    render: () => html`
-        <ak-drawer expanded resizable position="bottom"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const ResizableLeft = story({ expanded: true, resizable: true, position: "left" });
 
-export const CustomWidth: Story = {
-    name: "Custom Width",
-    render: () => html`
-        <ak-drawer expanded width="33"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const ResizableBottom = story({ expanded: true, resizable: true, position: "bottom" });
 
-export const ResponsiveWidth: Story = {
-    name: "Responsive Width",
-    render: () => html`
-        <ak-drawer expanded width="75-on-xl"> ${contentBlock} ${panelBlock} </ak-drawer>
-    `,
-};
+export const CustomWidth = story({ expanded: true, width: "33" });
+
+export const ResponsiveWidth = story({ expanded: true, width: "75-on-xl" });
diff --git a/web/src/styles/authentik/static.global.css b/web/src/styles/authentik/static.global.css
index 3b988fccf1fd..2518ecf7d706 100644
--- a/web/src/styles/authentik/static.global.css
+++ b/web/src/styles/authentik/static.global.css
@@ -11,6 +11,7 @@
 @import "./components/Form/form.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";

From 8f9c5e07ce292286a6f018042a12cf778bc14ec3 Mon Sep 17 00:00:00 2001
From: Ken Sternberg <ken@goauthentik.io>
Date: Mon, 13 Apr 2026 09:55:25 -0700
Subject: [PATCH 9/9] Prettier has opinions, as usual.

---
 web/src/elements/ak-drawer/ak-drawer.component.ts | 2 +-
 web/src/elements/ak-drawer/ak-drawer.stories.ts   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web/src/elements/ak-drawer/ak-drawer.component.ts b/web/src/elements/ak-drawer/ak-drawer.component.ts
index 03c2213d5897..09677bfabdee 100644
--- a/web/src/elements/ak-drawer/ak-drawer.component.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.component.ts
@@ -87,7 +87,7 @@ export class AkDrawer extends LitElement {
                 new ToggleEvent("toggle", {
                     newState: expandedMsg(this.expanded),
                     oldState: expandedMsg(expanded),
-                })
+                }),
             );
         }
     }
diff --git a/web/src/elements/ak-drawer/ak-drawer.stories.ts b/web/src/elements/ak-drawer/ak-drawer.stories.ts
index 07ae18fa581b..4889a4e4e409 100644
--- a/web/src/elements/ak-drawer/ak-drawer.stories.ts
+++ b/web/src/elements/ak-drawer/ak-drawer.stories.ts
@@ -4,7 +4,7 @@ import { DrawerExpandRequest } from "./ak-drawer.component";
 
 import type { Meta, StoryObj } from "@storybook/web-components-vite";
 
-import { html } from "lit";
+import { html, TemplateResult } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
 
 const toggle = (e: Event) => {