web: Storybook v9 (#15550)

* web: Update Storybook. Clean up theme styles. * web: Ignore Storybook output.
2026-04-25 17:15:26 +02:00 · 2025-07-16 06:29:01 +02:00
parent 63b1ccd4c3
commit 4da1115a7c
62 changed files with 551 additions and 1433 deletions
--- a/web/.storybook/DocsContainer.tsx
+++ b/web/.storybook/DocsContainer.tsx
@@ -0,0 +1,18 @@
+import { extendStorybookTheme } from "./theme.js";
+
+import { createUIThemeEffect, resolveUITheme } from "@goauthentik/web/common/theme.ts";
+
+import { DocsContainer, DocsContainerProps } from "@storybook/addon-docs/blocks";
+import { useEffect, useMemo, useState } from "react";
+
+export const ThemedDocsContainer: React.FC<DocsContainerProps> = ({
+    theme: initialTheme = resolveUITheme(),
+    ...props
+}) => {
+    const [theme, setTheme] = useState(initialTheme);
+    const resolvedTheme = useMemo(() => extendStorybookTheme(theme), [theme]);
+
+    useEffect(() => createUIThemeEffect(setTheme), []);
+
+    return <DocsContainer {...props} theme={resolvedTheme} />;
+};
--- a/web/.storybook/main.js
+++ b/web/.storybook/main.js
@@ -27,11 +27,6 @@ const inlineCSSPlugin = {
    },
 };

-/**
- * @satisfies {InlineConfig}
- */
-// const viteFinal = ;
-
 /**
 * @satisfies {StorybookConfig}
 */
@@ -42,18 +37,11 @@ const config = {
        { from: "../authentik", to: "/static/authentik" },
    ],
    addons: [
-        "@storybook/addon-controls",
+        // ---
        "@storybook/addon-links",
-        "@storybook/addon-essentials",
-        "storybook-addon-mock",
+        "@storybook/addon-docs",
    ],
-    framework: {
-        name: "@storybook/web-components-vite",
-        options: {},
-    },
-    docs: {
-        autodocs: "tag",
-    },
+    framework: "@storybook/web-components-vite",
    async viteFinal(config) {
        const [{ mergeConfig }, { createBundleDefinitions }] = await Promise.all([
            import("vite"),
@@ -71,4 +59,5 @@ const config = {
        return mergeConfig(config, overrides);
    },
 };
+
 export default config;
--- a/web/.storybook/manager.js
+++ b/web/.storybook/manager.js
@@ -1,40 +1,16 @@
 /**
 * @file Storybook manager configuration.
- *
- * @import { ThemeVarsPartial } from "storybook/internal/theming";
 */

-import { createUIThemeEffect, resolveUITheme } from "@goauthentik/web/common/theme.ts";
+import { extendStorybookTheme } from "./theme.js";

-import { addons } from "@storybook/manager-api";
-import { create } from "@storybook/theming/create";
+import { createUIThemeEffect } from "@goauthentik/web/common/theme.ts";

-/**
- * @satisfies {Partial<ThemeVarsPartial>}
- */
-const baseTheme = {
-    brandTitle: "authentik Storybook",
-    brandUrl: "https://goauthentik.io",
-    brandImage: "https://goauthentik.io/img/icon_left_brand_colour.svg",
-    brandTarget: "_self",
-};
-
-const uiTheme = resolveUITheme();
-
-addons.setConfig({
-    theme: create({
-        ...baseTheme,
-        base: uiTheme,
-    }),
-    enableShortcuts: false,
-});
+import { addons } from "storybook/manager-api";

 createUIThemeEffect((nextUITheme) => {
    addons.setConfig({
-        theme: create({
-            ...baseTheme,
-            base: nextUITheme,
-        }),
+        theme: extendStorybookTheme(nextUITheme),
        enableShortcuts: false,
    });
 });
--- a/web/.storybook/preview-head.html
+++ b/web/.storybook/preview-head.html
@@ -1,58 +0,0 @@
-<style>
-    body {
-        overflow-y: scroll;
-        margin: 0;
-    }
-
-    .sb-main-padded {
-        padding: 0 !important;
-    }
-
-    .story-shadow-container {
-        background-color: #fff;
-        box-shadow: 0 0 0.25em #ddd;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        gap: 1em;
-        margin: 0 auto;
-        max-width: 72em;
-        padding: 1em;
-        width: 100%;
-    }
-
-    .docs-story .story-shadow-container {
-        box-shadow: none;
-    }
-
-    .story-shadow-container[display-mode="flex-wrap"] {
-        flex-wrap: wrap;
-        flex-direction: row;
-    }
-
-    .title {
-        border-bottom: 1px solid #ccc;
-        color: #333;
-        font-size: 13px;
-        font-weight: bold;
-        margin: 2rem -1rem 1rem;
-        padding-bottom: 0.25rem;
-        padding-left: 1rem;
-    }
-
-    .title code {
-        background-color: #f5f5f5;
-        border-radius: 0.25rem;
-        font-weight: bold;
-        padding: 0.1rem 0.25rem;
-    }
-
-    .sbdocs-preview .hljs {
-        color: #fff !important;
-        white-space: pre-line;
-    }
-
-    .sbdocs-pre > div {
-        margin: 1em 0;
-    }
-</style>
--- a/web/.storybook/preview.js
+++ b/web/.storybook/preview.js
@@ -1,18 +1,36 @@
-/// <reference types="../types/css.js" />
 /**
 * @file Storybook manager configuration.
 *
 * @import { Preview } from "@storybook/web-components";
 */
-import { applyDocumentTheme } from "@goauthentik/web/common/theme.ts";

-applyDocumentTheme();
+import "#common/styles/storybook.css";
+
+import { ThemedDocsContainer } from "./DocsContainer.tsx";
+import { extendStorybookTheme } from "./theme.js";
+
+import {
+    applyDocumentTheme,
+    createUIThemeEffect,
+    resolveUITheme,
+} from "@goauthentik/web/common/theme.ts";
+
+const base = resolveUITheme();
+const theme = extendStorybookTheme(base);
+
+createUIThemeEffect(applyDocumentTheme);

 /**
 * @satisfies {Preview}
 */
 const preview = {
+    tags: ["autodocs"],
+
    parameters: {
+        docs: {
+            theme,
+            container: ThemedDocsContainer,
+        },
        options: {
            storySort: {
                method: "alphabetical",
--- a/web/.storybook/theme.js
+++ b/web/.storybook/theme.js
@@ -0,0 +1,48 @@
+/**
+ * @import { ResolvedUITheme } from "@goauthentik/web/common/theme.ts";
+ * @import { ThemeVars } from "storybook/theming";
+ */
+
+import { themes as BaseThemes } from "storybook/theming";
+
+/** @type {Partial<ThemeVars>} */
+const brand = {
+    brandTitle: "authentik Storybook",
+    brandUrl: "https://goauthentik.io",
+    brandImage: "https://goauthentik.io/img/icon_left_brand_colour.svg",
+    brandTarget: "_self",
+    barBg: "rgba(255,255,255,.05)",
+    colorSecondary: "#fd4b2c",
+    colorPrimary: "green",
+};
+
+/**
+ * @type {Record<ResolvedUITheme, ThemeVars>}
+ */
+const themes = {
+    light: {
+        ...BaseThemes.light,
+        appBg: "#fff",
+        appContentBg: "hsl(9 88% 99%)",
+        appPreviewBg: "hsl(9 88% 99%)",
+    },
+    dark: {
+        ...BaseThemes.dark,
+        appBg: "#1c1e21",
+        appContentBg: "hsl(260 26% 5%)",
+        appPreviewBg: "hsl(260 26% 5%)",
+    },
+};
+
+/**
+ * @param {ResolvedUITheme | ThemeVars} base
+ * @returns {ThemeVars}
+ */
+export function extendStorybookTheme(base) {
+    const theme = typeof base === "string" ? themes[base] : base || themes;
+
+    return /** @type {ThemeVars} */ ({
+        ...theme,
+        ...brand,
+    });
+}
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -152,16 +152,10 @@
        "@goauthentik/tsconfig": "^1.0.4",
        "@hcaptcha/types": "^1.0.4",
        "@lit/localize-tools": "^0.8.0",
-        "@storybook/addon-essentials": "^8.6.14",
-        "@storybook/addon-links": "^8.6.14",
-        "@storybook/blocks": "^8.6.12",
-        "@storybook/channels": "^8.6.14",
-        "@storybook/experimental-addon-test": "^8.6.14",
-        "@storybook/manager-api": "^8.6.14",
-        "@storybook/test": "^8.6.14",
-        "@storybook/web-components": "^8.6.14",
-        "@storybook/web-components-vite": "^8.6.14",
-        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
+        "@storybook/addon-docs": "^9.0.16",
+        "@storybook/addon-links": "^9.0.16",
+        "@storybook/web-components": "^9.0.16",
+        "@storybook/web-components-vite": "^9.0.16",
        "@types/chart.js": "^2.9.41",
        "@types/codemirror": "^5.60.15",
        "@types/dompurify": "^3.0.5",
@@ -193,8 +187,7 @@
        "prettier": "^3.3.3",
        "pseudolocale": "^2.1.0",
        "rollup-plugin-postcss-lit": "^2.2.0",
-        "storybook": "^8.6.14",
-        "storybook-addon-mock": "^5.0.0",
+        "storybook": "^9.0.16",
        "turnstile-types": "^1.2.3",
        "typescript": "^5.8.3",
        "typescript-eslint": "^8.37.0",
@@ -368,10 +361,6 @@
    ],
    "prettier": "@goauthentik/prettier-config",
    "overrides": {
-        "@storybook/addon-docs": {
-            "react": "^19.1.0",
-            "react-dom": "^19.1.0"
-        },
        "chromedriver": {
            "axios": "^1.8.4"
        },
@@ -380,10 +369,6 @@
        },
        "rapidoc": {
            "@apitools/openapi-parser@": "0.0.37"
-        },
-        "storybook-addon-mock": {
-            "react": "^19.1.0",
-            "react-dom": "^19.1.0"
        }
    }
 }
--- a/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts
+++ b/web/src/admin/admin-settings/stories/AdminSettingsFooterLinks.stories.ts
@@ -38,10 +38,7 @@ const metadata: Meta<FooterLinkInput> = {
                });
            }, 250);

-            return html`<div
-                style="background: #fff; padding: 2em; position: relative"
-                id="the-main-event"
-            >
+            return html`<div style="padding: 2em; position: relative" id="the-main-event">
                <style>
                    li {
                        display: block;
--- a/web/src/admin/common/ak-flow-search/ak-flow-search.stories.ts
+++ b/web/src/admin/common/ak-flow-search/ak-flow-search.stories.ts
@@ -85,7 +85,7 @@ const metadata: Meta<AkFlowSearch<Flow>> = {
 export default metadata;

 const container = (testItem: TemplateResult) => {
-    return html` <div style="background: #fff; padding: 1.0rem;">
+    return html` <div style="padding: 1.0rem;">
        <style>
            li {
                display: block;
--- a/web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts
+++ b/web/src/admin/common/stories/ak-crypto-certificate-search.stories.ts
@@ -57,7 +57,7 @@ function injectTheme() {

 const container = (testItem: TemplateResult) => {
    injectTheme();
-    return html` <div style="background: #fff; padding: 2em">
+    return html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/common/styles/storybook.css
+++ b/web/src/common/styles/storybook.css
@@ -0,0 +1,58 @@
+html {
+    color-scheme: light dark;
+}
+
+@media (prefers-color-scheme: dark) {
+    html {
+        color-scheme: dark light;
+    }
+}
+
+.sbdocs.sbdocs-wrapper,
+.sb-preparing-story,
+.sb-preparing-docs {
+    background: var(--ak-base-background, hsl(9 88% 99%)) !important;
+}
+
+.sbdocs,
+.container.sidebar-container {
+    transition: background 100ms;
+}
+
+.sbdocs.sbdocs-preview {
+    background: var(--ak-docs-preview-background, #fff) !important;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ak-base-background: hsl(260 26% 5%);
+        --ak-docs-preview-background: #18191a;
+    }
+
+    .sb-preparing-docs {
+        .sb-argstableBlock,
+        .sb-previewBlock {
+            filter: invert(1);
+        }
+    }
+}
+
+.sbdocs > h1,
+.sbdocs-title {
+    border-bottom: 1px solid;
+    margin: 2rem -1rem 1rem;
+    padding-bottom: 0.25rem;
+    padding-left: 1rem;
+
+    code {
+        background: #f5f5f5;
+        border-radius: 0.25rem;
+        font-weight: bold;
+        padding: 0.1rem 0.25rem;
+    }
+}
+
+.sbdocs-preview .hljs {
+    color: #fff !important;
+    white-space: pre-line;
+}
--- a/web/src/components/ak-hint/ak-hint.stories.ts
+++ b/web/src/components/ak-hint/ak-hint.stories.ts
@@ -29,7 +29,7 @@ const metadata: Meta<AkHint> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-multi-select.stories.ts
+++ b/web/src/components/stories/ak-multi-select.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkMultiSelect> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-number-input.stories.ts
+++ b/web/src/components/stories/ak-number-input.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkNumberInput> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #000; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-radio-input.stories.ts
+++ b/web/src/components/stories/ak-radio-input.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkRadioInput<Record<string, number>>> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-slug-input.stories.ts
+++ b/web/src/components/stories/ak-slug-input.stories.ts
@@ -23,7 +23,7 @@ const metadata: Meta<AkSlugInput> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #000; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-status-label.stories.ts
+++ b/web/src/components/stories/ak-status-label.stories.ts
@@ -21,17 +21,16 @@ const metadata: Meta<AkStatusLabel> = {

 export default metadata;

-const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
-        <style>
-            dl {
-                display: grid;
-                grid-template-columns: 22ch 1fr;
-                gap: 0.5rem;
-            }
-        </style>
-        ${testItem}
-    </div>`;
+const container = (testItem: TemplateResult) => html`
+    <style>
+        dl {
+            display: grid;
+            grid-template-columns: 22ch 1fr;
+            gap: 0.5rem;
+        }
+    </style>
+    ${testItem}
+`;

 export const AppIcon = () => {
    // prettier-ignore
--- a/web/src/components/stories/ak-switch-input.stories.ts
+++ b/web/src/components/stories/ak-switch-input.stories.ts
@@ -25,22 +25,21 @@ const metadata: Meta<AkSwitchInput> = {

 export default metadata;

-const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
-        <style>
-                        li {
+const container = (testItem: TemplateResult) => html`
+    <style>
+        li {
            display: block;
-            }
-            p {
+        }
+        p {
            margin-top: 1em;
-            }
-                        ${PFSwitch};
-        </style>
+        }
+        ${PFSwitch};
+    </style>

-        ${testItem}
+    ${testItem}

-        <ul id="switch-message-pad" style="margin-top: 1em"></ul>
-    </div>`;
+    <ul id="switch-message-pad" style="margin-top: 1em"></ul>
+`;

 export const SwitchInput = () => {
    const result = "";
--- a/web/src/components/stories/ak-text-input.stories.ts
+++ b/web/src/components/stories/ak-text-input.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkTextInput> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #000; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-textarea-input.stories.ts
+++ b/web/src/components/stories/ak-textarea-input.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkTextareaInput> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #000; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/components/stories/ak-toggle-group.stories.ts
+++ b/web/src/components/stories/ak-toggle-group.stories.ts
@@ -32,7 +32,7 @@ function injectTheme() {

 const container = (testItem: TemplateResult) => {
    injectTheme();
-    return html` <div style="background: #fff; padding: 2em">
+    return html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts
+++ b/web/src/elements/ak-checkbox-group/ak-checkbox-group.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkCheckboxGroup> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-available-pane.stories.ts
@@ -38,7 +38,7 @@ const metadata: Meta<AkDualSelectAvailablePane> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-controls.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-controls.stories.ts
@@ -38,7 +38,7 @@ const metadata: Meta<AkDualSelectControls> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-master.stories.ts
@@ -126,7 +126,7 @@ export class AkSbFruity extends LitElement {
 }

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-search.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-search.stories.ts
@@ -22,7 +22,7 @@ const metadata: Meta<AkSearchbar> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select-selected-pane.stories.ts
@@ -35,7 +35,7 @@ const metadata: Meta<AkDualSelectSelectedPane> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-dual-select.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-dual-select.stories.ts
@@ -37,7 +37,7 @@ const metadata: Meta<AkDualSelect> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-dual-select/stories/ak-pagination.stories.ts
+++ b/web/src/elements/ak-dual-select/stories/ak-pagination.stories.ts
@@ -29,7 +29,7 @@ const metadata: Meta<AkPagination> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-list-select/stories/ak-list-select.stories.ts
+++ b/web/src/elements/ak-list-select/stories/ak-list-select.stories.ts
@@ -56,10 +56,7 @@ const container = (testItem: TemplateResult) => {
        );
    }, 250);

-    return html` <div
-        style="background: #fff; padding: 2em; position: relative"
-        id="the-main-event"
-    >
+    return html` <div style="padding: 2em; position: relative" id="the-main-event">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-locale-context/ak-locale-context.stories.ts
+++ b/web/src/elements/ak-locale-context/ak-locale-context.stories.ts
@@ -29,7 +29,7 @@ export class AKLocaleSensitiveDemoComponent extends LitElement {
 }

 export const InFrench = () =>
-    html`<div style="background: #fff; padding: 4em">
+    html`<div style="padding: 4em">
        <ak-locale-context locale="fr"
            ><ak-locale-demo-component
                >Everything is not ok.</ak-locale-demo-component
@@ -44,7 +44,7 @@ export const SwitchingBackAndForth = () => {
        window.dispatchEvent(customEvent(EVENT_LOCALE_REQUEST, { locale: lang }));
    }, 1000);

-    return html`<div style="background: #fff; padding: 4em">
+    return html`<div style="padding: 4em">
        <ak-locale-context locale="fr">
            <ak-locale-sensitive-demo-component></ak-locale-sensitive-demo-component
        ></ak-locale-context>
--- a/web/src/elements/ak-table/stories/ak-select-table.stories.ts
+++ b/web/src/elements/ak-table/stories/ak-select-table.stories.ts
@@ -42,7 +42,7 @@ export default metadata;
 type Story = StoryObj;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/ak-table/stories/ak-simple-table.stories.ts
+++ b/web/src/elements/ak-table/stories/ak-simple-table.stories.ts
@@ -45,7 +45,7 @@ export default metadata;
 type Story = StoryObj;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/buttons/ActionButton/ak-action-button.docs.mdx
+++ b/web/src/elements/buttons/ActionButton/ak-action-button.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as ActionButtonStories from "./ak-action-button.stories";

--- a/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts
+++ b/web/src/elements/buttons/ActionButton/ak-action-button.stories.ts
@@ -29,7 +29,7 @@ const metadata: Meta<AKActionButton> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/buttons/SpinnerButton/ak-spinner-button.stories.ts
+++ b/web/src/elements/buttons/SpinnerButton/ak-spinner-button.stories.ts
@@ -35,7 +35,7 @@ export const ButtonWithSuccess = () => {
            }, 3000);
        });

-    return html`<div style="background: #fff; padding: 4em">
+    return html`<div style="padding: 4em">
        <ak-spinner-button class="pf-m-primary" .callAction=${run}>3 Seconds</ak-spinner-button>
    </div>`;
 };
@@ -48,7 +48,7 @@ export const ButtonWithReject = () => {
            }, 3000);
        });

-    return html`<div style="background: #fff; padding: 4em">
+    return html`<div style="padding: 4em">
        <ak-spinner-button class="pf-m-secondary" .callAction=${run}>3 Seconds</ak-spinner-button>
    </div>`;
 };
--- a/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts
+++ b/web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts
@@ -23,7 +23,7 @@ function makeid(length: number) {
 // a styled wrapper for the return messages, and a styled wrapper for each message.

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/cards/stories/AggregateCard.docs.mdx
+++ b/web/src/elements/cards/stories/AggregateCard.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as AggregateCardStories from "./AggregateCard.stories";

--- a/web/src/elements/cards/stories/AggregateCard.stories.ts
+++ b/web/src/elements/cards/stories/AggregateCard.stories.ts
@@ -35,7 +35,7 @@ export const DefaultStory: StoryObj = {
        leftJustified: false,
    },
    render: ({ icon, header, headerLink, subtext, leftJustified }: IAggregateCard) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <style>
                ak-aggregate-card {
                    display: inline-block;
@@ -58,6 +58,6 @@ export const DefaultStory: StoryObj = {
                    guys, but race without a finish line, nor thought shower.
                </p>
            </ak-aggregate-card>
-        </div>`;
+        `;
    },
 };
--- a/web/src/elements/cards/stories/AggregatePromiseCard.docs.mdx
+++ b/web/src/elements/cards/stories/AggregatePromiseCard.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as AggregatePromiseCardStories from "./AggregatePromiseCard.stories";

--- a/web/src/elements/cards/stories/AggregatePromiseCard.stories.ts
+++ b/web/src/elements/cards/stories/AggregatePromiseCard.stories.ts
@@ -45,7 +45,7 @@ export const DefaultStory: StoryObj = {
        const runThis = (timeout: number, value: string) =>
            new Promise((resolve) => setTimeout(resolve, timeout, value));

-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`>
            <style>
                ak-aggregate-card-promise {
                    display: inline-block;
@@ -61,8 +61,7 @@ export const DefaultStory: StoryObj = {
                ?left-justified=${leftJustified}
                .promise=${runThis(EXAMPLE_TIMEOUT, text)}
            >
-            </ak-aggregate-card-promise>
-        </div>`;
+            </ak-aggregate-card-promise> `;
    },
 };

@@ -86,7 +85,7 @@ export const PromiseRejected: StoryObj = {
        const runThis = (timeout: number, value: string) =>
            new Promise((_resolve, reject) => setTimeout(reject, timeout, value));

-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <style>
                ak-aggregate-card-promise {
                    display: inline-block;
@@ -104,6 +103,6 @@ export const PromiseRejected: StoryObj = {
                .promise=${runThis(EXAMPLE_TIMEOUT, text)}
            >
            </ak-aggregate-card-promise>
-        </div>`;
+        `;
    },
 };
--- a/web/src/elements/cards/stories/QuickActionsCard.docs.mdx
+++ b/web/src/elements/cards/stories/QuickActionsCard.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as QuickActionsCardStories from "./QuickActionsCard.stories";

--- a/web/src/elements/cards/stories/QuickActionsCard.stories.ts
+++ b/web/src/elements/cards/stories/QuickActionsCard.stories.ts
@@ -34,7 +34,7 @@ export const DefaultStory: StoryObj = {
        title: "Quick actions",
    },
    render: ({ title }) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <style>
                ak-quick-actions-card {
                    display: inline-block;
@@ -43,6 +43,6 @@ export const DefaultStory: StoryObj = {
                }
            </style>
            <ak-quick-actions-card title=${title} .actions=${ACTIONS}></ak-quick-actions-card>
-        </div>`;
+        `;
    },
 };
--- a/web/src/elements/forms/SearchSelect/stories/ak-search-select-view.stories.ts
+++ b/web/src/elements/forms/SearchSelect/stories/ak-search-select-view.stories.ts
@@ -24,7 +24,7 @@ const metadata: Meta<SearchSelectView> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
+++ b/web/src/elements/forms/SearchSelect/stories/ak-search-select.stories.ts
@@ -47,7 +47,7 @@ const metadata: Meta<SearchSelect<Sample>> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/forms/stories/Radio.stories.ts
+++ b/web/src/elements/forms/stories/Radio.stories.ts
@@ -23,7 +23,7 @@ const metadata: Meta<Radio<any>> = {
 export default metadata;

 const container = (testItem: TemplateResult) =>
-    html` <div style="background: #fff; padding: 2em">
+    html` <div style="padding: 2em">
        <style>
            li {
                display: block;
--- a/web/src/elements/stories/Alert.docs.mdx
+++ b/web/src/elements/stories/Alert.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as AlertStories from "./Alert.stories";

--- a/web/src/elements/stories/Alert.stories.ts
+++ b/web/src/elements/stories/Alert.stories.ts
@@ -36,7 +36,7 @@ export const DefaultStory: StoryObj = {

    // @ts-ignore
    render: ({ inline, level, icon, message }: IAlertForTesting) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <style>
                ak-alert {
                    display: inline-block;
@@ -47,7 +47,7 @@ export const DefaultStory: StoryObj = {
            <ak-alert level=${ifDefined(level)} ?inline=${inline} icon=${ifDefined(icon)}>
                <p>${message}</p>
            </ak-alert>
-        </div>`;
+        `;
    },
 };

--- a/web/src/elements/stories/AppIcon.docs.mdx
+++ b/web/src/elements/stories/AppIcon.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as AppIconStories from "./AppIcon.stories";

--- a/web/src/elements/stories/AppIcon.stories.ts
+++ b/web/src/elements/stories/AppIcon.stories.ts
@@ -30,18 +30,17 @@ const metadata: Meta<AppIcon> = {

 export default metadata;

-const container = (testItem: TemplateResult) =>
-    html` <div style="background: #f0f0f0; padding: 1em">
-        <style>
-            li {
-                display: block;
-            }
-            p {
-                margin-top: 1em;
-            }
-        </style>
-        ${testItem}
-    </div>`;
+const container = (testItem: TemplateResult) => html`
+    <style>
+        li {
+            display: block;
+        }
+        p {
+            margin-top: 1em;
+        }
+    </style>
+    ${testItem}
+`;

 export const DefaultStory: StoryObj = {
    args: {
--- a/web/src/elements/stories/Divider.docs.mdx
+++ b/web/src/elements/stories/Divider.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as DividerStories from "./Divider.stories";

--- a/web/src/elements/stories/Divider.stories.ts
+++ b/web/src/elements/stories/Divider.stories.ts
@@ -18,16 +18,15 @@ const metadata: Meta<Divider> = {

 export default metadata;

-const container = (content: TemplateResult) =>
-    html` <div style="background-color: #f0f0f0; padding: 1rem;">
-        <style>
-            ak-divider {
-                display: inline-block;
-                width: 32rem;
-                max-width: 32rem;
-            }</style
-        >${content}
-    </div>`;
+const container = (content: TemplateResult) => html`
+    <style>
+        ak-divider {
+            display: inline-block;
+            width: 32rem;
+            max-width: 32rem;
+        }</style
+    >${content}
+`;

 export const DefaultStory: StoryObj = {
    render: () => container(html` <ak-divider> </ak-divider> `),
--- a/web/src/elements/stories/Expand.docs.mdx
+++ b/web/src/elements/stories/Expand.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as ExpandStories from "./Expand.stories";

--- a/web/src/elements/stories/Expand.stories.ts
+++ b/web/src/elements/stories/Expand.stories.ts
@@ -25,7 +25,7 @@ const metadata: Meta<Expand> = {
 export default metadata;

 const container = (content: TemplateResult) =>
-    html` <div style="background-color: #f0f0f0; padding: 1rem;">
+    html` <div>
        <style>
            ak-divider {
                display: inline-block;
--- a/web/src/elements/stories/Label.docs.mdx
+++ b/web/src/elements/stories/Label.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as LabelStories from "./Label.stories";

--- a/web/src/elements/stories/Label.stories.ts
+++ b/web/src/elements/stories/Label.stories.ts
@@ -36,7 +36,7 @@ export const DefaultStory: StoryObj = {

    // @ts-ignore
    render: ({ compact, color, icon, message }: ILabelForTesting) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`>
            <style>
                ak-label {
                    display: inline-block;
@@ -46,8 +46,7 @@ export const DefaultStory: StoryObj = {
            </style>
            <ak-label color=${ifDefined(color)} ?compact=${compact} icon=${ifDefined(icon)}>
                <p>${message}</p>
-            </ak-label>
-        </div>`;
+            </ak-label> `;
    },
 };

--- a/web/src/elements/stories/ak-array-input.stories.ts
+++ b/web/src/elements/stories/ak-array-input.stories.ts
@@ -44,10 +44,7 @@ const metadata: Meta<IArrayInput<unknown>> = {
                });
            }, 250);

-            return html`<div
-                style="background: #fff; padding: 2em; position: relative"
-                id="the-main-event"
-            >
+            return html`<div style="padding: 2em; position: relative" id="the-main-event">
                <style>
                    li {
                        display: block;
--- a/web/src/elements/sync/SyncStatusCard.stories.ts
+++ b/web/src/elements/sync/SyncStatusCard.stories.ts
@@ -63,13 +63,13 @@ export const SingleTask: StoryObj = {
    },
    // @ts-ignore
    render: ({ status }: SyncStatus) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <ak-sync-status-card
                .fetch=${async () => {
                    return status;
                }}
            ></ak-sync-status-card>
-        </div>`;
+        `;
    },
 };

@@ -146,12 +146,12 @@ export const MultipleTasks: StoryObj = {
    },
    // @ts-ignore
    render: ({ status }: SyncStatus) => {
-        return html` <div style="background-color: #f0f0f0; padding: 1rem;">
+        return html`
            <ak-sync-status-card
                .fetch=${async () => {
                    return status;
                }}
            ></ak-sync-status-card>
-        </div>`;
+        `;
    },
 };
--- a/web/src/user/LibraryPage/stories/ApplicationEmptyState.docs.mdx
+++ b/web/src/user/LibraryPage/stories/ApplicationEmptyState.docs.mdx
@@ -1,4 +1,4 @@
-import { Canvas, Description, Meta, Story, Title } from "@storybook/blocks";
+import { Canvas, Description, Meta, Story, Title } from "@storybook/addon-docs/blocks";

 import * as ApplicationEmptyStateStories from "./ApplicationEmptyState.stories";

--- a/web/src/user/LibraryPage/stories/ApplicationEmptyState.stories.ts
+++ b/web/src/user/LibraryPage/stories/ApplicationEmptyState.stories.ts
@@ -7,11 +7,11 @@ export default {
 };

 export const OrdinaryUser = () =>
-    html`<div style="background: #fff; padding: 4em">
+    html`<div style="padding: 4em">
        <ak-library-application-empty-list></ak-library-application-empty-list>
    </div> `;

 export const AdminUser = () =>
-    html`<div style="background: #fff; padding: 4em">
+    html`<div style="padding: 4em">
        <ak-library-application-empty-list isadmin></ak-library-application-empty-list>
    </div> `;
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -42,6 +42,7 @@
        // ---
        "**/out/**/*",
        "**/dist/**/*",
+        "storybook-static",
        "src/**/*.test.ts",
        "./tests",