diff --git a/.claude/skills/components/display-prompt.md b/.claude/skills/components/display-prompt.md
index fd452c51..383cf71b 100644
--- a/.claude/skills/components/display-prompt.md
+++ b/.claude/skills/components/display-prompt.md
@@ -16,6 +16,7 @@ the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v
 | `theme` | `SemanticTheme` | `"info"` | `"info" \| "success" \| "warning" \| "error"` |
 | `dismissible` | `boolean` | `false` | Shows a close button. |
 | `useAutoFocus` | `boolean` | `false` | Focuses the prompt root element on mount. |
+| `masked` | `boolean` | `false` | SVG glass border — swaps `AlertContent` for `AlertMaskedContent`. |
 | `styleClassPassthrough` | `string \| string[]` | `[]` | Extra classes on the inner wrapper. Supported modifier: `"outlined"`. |
 | `v-model` | `boolean` | `false` | Optional parent control — see dismiss behaviour below. |
 
@@ -38,8 +39,9 @@ the DOM. Dismiss can be controlled locally (closes itself) or by a parent via `v
 | `"warning"` | `akar-icons:circle-alert` |
 | `"error"` | `akar-icons:circle-alert` |
 
-`data-theme` is set on the inner wrapper, activating the CSS palette (`--theme-surface`,
-`--theme-text`, `--theme-border`, `--theme-ring`, etc.).
+`data-theme` is set on `.display-prompt-wrapper`, activating the CSS palette (`--theme-accent`,
+`--theme-text`, `--theme-border`, `--theme-ring`, etc.). The wrapper's left-edge accent uses
+`--theme-accent` (step 5/4) — not `--theme-surface` — so it stays visually distinct from buttons.
 
 ## Dismiss behaviour
 
@@ -111,11 +113,25 @@ Scope overrides using your page or section wrapper class — no `:deep()` needed
 
 ```css
 .my-section .display-prompt-wrapper {
-  --theme-surface: oklch(60% 0.18 140);
+  --theme-accent: oklch(60% 0.18 140); /* left-edge accent strip */
   border-radius: 0.8rem;
 }
 ```
 
+## Masked variant
+
+Setting `:masked="true"` swaps `AlertContent` for `AlertMaskedContent`, giving the prompt an SVG-based
+border and a semi-transparent background so content behind it is faintly visible. The inner layout is
+identical — all the same slots apply. Place the prompt over a coloured or image background for the
+glass effect to be visible.
+
+```vue
+<DisplayPrompt theme="info" :masked="true">
+  <template #title>Glass prompt</template>
+  <template #content>Semi-transparent, backed by AlertMaskedContent.</template>
+</DisplayPrompt>
+```
+
 ## Notes
 
 - `DisplayPromptTheme` is an alias for `SemanticTheme` (`"info" | "success" | "warning" | "error"`).
diff --git a/.claude/skills/components/display-toast.md b/.claude/skills/components/display-toast.md
index 4daf9645..cf025f87 100644
--- a/.claude/skills/components/display-toast.md
+++ b/.claude/skills/components/display-toast.md
@@ -41,6 +41,7 @@ interface DisplayToastConfig {
     position?: "top" | "bottom"  // default: "top"
     alignment?: "left" | "center" | "right" // default: "right"
     fullWidth?: boolean          // default: false — overrides alignment
+    masked?: boolean             // SVG glass border — semi-transparent background — default: false
   }
   behavior?: {
     autoDismiss?: boolean        // default: true
@@ -198,6 +199,14 @@ Override tokens via an unscoped style block scoped to a page or layout class:
 }
 ```
 
+### Masked variant
+
+Setting `appearance.masked: true` swaps `AlertContent` for `AlertMaskedContent`, which uses an SVG-based border and a semi-transparent background (`rgba(0,0,0,0.3)`) so page content is faintly visible beneath the toast.
+
+The SVG border shape matches the standard toast exactly (8px left radius, 4px right, 6px accent-colour left bar via `--theme-accent`). Override any dimension or colour via a `maskConfig` prop if using `AlertMaskedContent` standalone.
+
+The inner content layout is handled by the shared `AlertContentInner` molecule — both variants reuse it. `AlertMaskedContent` overrides `--_alert-content-inner-bg: transparent` so the glass effect shows through.
+
 ### Provider notes
 
 - `useToastQueue` state persists across route changes — no `onBeforeRouteLeave` cleanup needed.
diff --git a/.claude/skills/index.md b/.claude/skills/index.md
index 154922d4..3f5da982 100644
--- a/.claude/skills/index.md
+++ b/.claude/skills/index.md
@@ -92,7 +92,7 @@ Each skill is a single markdown file named `<area>-<task>.md`.
     ├── display-pill.md         — DisplayPill: pill/badge label with icon slot, 6 variants, 3 sizes, reversible order, full CSS token API for border/outline/colour
     ├── carousel-flip.md        — CarouselFlip: FLIP-animated carousel, carouselDataIds slot API, buttonLayout variants (sides/controls-flanking/controls-grouped-right/overlay), CSS tokens
     ├── samaritan-prompt-mixed.md — SamaritanPromptMixed: animated text prompt, typewriter/word-pulse effects, MessageConfig API, aria-live accessibility, CSS tokens
-    ├── display-toast.md          — DisplayToast (standalone v-model) + DisplayToastProvider + useToastQueue (app-wide queue): stacking, FLIP dismiss, maxVisible, SemanticTheme × 4
+    ├── display-toast.md          — DisplayToast (standalone v-model) + DisplayToastProvider + useToastQueue (app-wide queue): stacking, FLIP dismiss, maxVisible, SemanticTheme × 4, masked SVG glass variant
     └── display-prompt.md         — DisplayPrompt: inline notification banner, SemanticTheme × 4, local vs parent-controlled dismiss, outlined modifier, CSS token override
 ```
 
diff --git a/.claude/skills/theming-colour-ramps.md b/.claude/skills/theming-colour-ramps.md
index d3fddfcb..c0577709 100644
--- a/.claude/skills/theming-colour-ramps.md
+++ b/.claude/skills/theming-colour-ramps.md
@@ -70,17 +70,18 @@ These are used by components that need a specific step by name (e.g. error state
 
 ## Semantic slots
 
-Eight shared colour roles are declared in `_theme-slots.css` on the same selector as the ramp.
+Nine shared colour roles are declared in `_theme-slots.css` on the same selector as the ramp.
 All themed components (buttons, inputs, prompts, toasts) read only these tokens:
 
 | Token                   | Light (step) | Dark (step) | Role                              |
 |-------------------------|--------------|-------------|-----------------------------------|
-| `--theme-surface`       | 9            | 7           | Filled button/chip surface        |
-| `--theme-surface-hover` | 8            | 6           | Hover state of filled surface     |
-| `--theme-surface-subtle`| 1            | 9           | Hover bg for outline elements     |
+| `--theme-surface`       | 7            | 9           | Filled button/chip surface        |
+| `--theme-surface-hover` | 9            | 7           | Hover state of filled surface     |
+| `--theme-accent`        | 5            | 4           | Decorative accent strip (prompt/toast left edge) |
+| `--theme-surface-subtle`| 1            | 9           | Subtle body bg for prompt/toast, outline element hover |
 | `--theme-border`        | 6            | 5           | Input/card border                 |
 | `--theme-border-focus`  | 4            | 3           | Focused border                    |
-| `--theme-ring`          | 2            | 2           | Focus ring (outline)              |
+| `--theme-ring`          | 1            | 9           | Focus ring (outline)              |
 | `--theme-on-surface`    | 0            | 0           | Text/icon on filled surface       |
 | `--theme-text`          | 9            | 2           | Text on page, outline element text|
 
diff --git a/.claude/skills/theming-override-default.md b/.claude/skills/theming-override-default.md
index cbaa218d..92c3d7cc 100644
--- a/.claude/skills/theming-override-default.md
+++ b/.claude/skills/theming-override-default.md
@@ -181,4 +181,5 @@ that hue/chroma pair.
 
 - `--slate-*` neutrals ship with the layer — no need to redefine for page backgrounds/text
 - To add a custom `[data-theme]` variant using your generated palette, see `theming-colour-ramps.md`
-- The `warning` theme overrides `--theme-surface` steps directly for a different surface intensity — this pattern is available for any custom theme that needs a non-default surface step
+- The `warning` theme overrides `--theme-surface` and `--theme-surface-hover` to lighter steps (5/4 and 7/5) so warning buttons read as warm/alert rather than the default dark surface — this pattern is available for any custom theme that needs a non-default surface step
+- `--theme-accent` (step 5/4) is separate from `--theme-surface` (step 7/9) — accent is for decorative strips in `DisplayPrompt` and `DisplayToast`; surface is for interactive elements like buttons
diff --git a/.claude/skills/theming-partial-override.md b/.claude/skills/theming-partial-override.md
index f5555d93..5cc28b30 100644
--- a/.claude/skills/theming-partial-override.md
+++ b/.claude/skills/theming-partial-override.md
@@ -14,17 +14,18 @@ after the layer styles.
 
 ## Semantic slots — the tokens to override
 
-All themed components share the same 8-slot vocabulary. Overriding these affects buttons, inputs,
+All themed components share a 9-slot vocabulary. Overriding these affects buttons, inputs,
 prompts, and toasts simultaneously:
 
 | Token                   | Default (light → dark)     | Role                              |
 |-------------------------|----------------------------|-----------------------------------|
-| `--theme-surface`       | `--colour-theme-9` / `7`   | Filled button/chip surface        |
-| `--theme-surface-hover` | `--colour-theme-8` / `6`   | Hover state of filled surface     |
-| `--theme-surface-subtle`| `--colour-theme-1` / `9`   | Hover bg for outline elements     |
+| `--theme-surface`       | `--colour-theme-7` / `9`   | Filled button/chip surface        |
+| `--theme-surface-hover` | `--colour-theme-9` / `7`   | Hover state of filled surface     |
+| `--theme-accent`        | `--colour-theme-5` / `4`   | Decorative accent strip (prompt/toast left edge) |
+| `--theme-surface-subtle`| `--colour-theme-1` / `9`   | Subtle body bg for prompt/toast, outline element hover |
 | `--theme-border`        | `--colour-theme-6` / `5`   | Input/card border                 |
 | `--theme-border-focus`  | `--colour-theme-4` / `3`   | Focused border                    |
-| `--theme-ring`          | `--colour-theme-2`         | Focus ring (outline)              |
+| `--theme-ring`          | `--colour-theme-1` / `9`   | Focus ring (outline)              |
 | `--theme-on-surface`    | `--colour-theme-0`         | Text/icon on filled surface       |
 | `--theme-text`          | `--colour-theme-9` / `2`   | Text on page, outline element text|
 
@@ -64,10 +65,10 @@ Page-level tokens:
 #### Override button surface only
 
 ```css
-/* Make primary buttons darker/more saturated */
+/* Make primary buttons darker/more saturated (step-7/9 defaults, step-9/7 hover) */
 :where(html) {
-  --theme-surface:       light-dark(oklch(28% 0.18 85), oklch(45% 0.20 85));
-  --theme-surface-hover: light-dark(oklch(22% 0.16 85), oklch(38% 0.18 85));
+  --theme-surface:       light-dark(oklch(48% 0.18 85), oklch(32% 0.20 85));
+  --theme-surface-hover: light-dark(oklch(32% 0.18 85), oklch(48% 0.20 85));
 }
 ```
 
@@ -118,8 +119,8 @@ To restrict an override to a specific section, scope to a wrapper class instead
 
 .hero-cta {
   /* Just these buttons use a different surface colour */
-  --theme-surface:       light-dark(oklch(32% 0.16 85), oklch(55% 0.18 85));
-  --theme-surface-hover: light-dark(oklch(25% 0.14 85), oklch(48% 0.16 85));
+  --theme-surface:       light-dark(oklch(48% 0.16 85), oklch(32% 0.18 85));
+  --theme-surface-hover: light-dark(oklch(32% 0.14 85), oklch(48% 0.16 85));
 }
 ```
 
diff --git a/README.md b/README.md
index 92b2063a..fc7a7c68 100644
--- a/README.md
+++ b/README.md
@@ -124,7 +124,7 @@ computes the scale from the two params:
 
 Scale direction: **00 = lightest, 10 = darkest**. Chroma tapers at both ends and peaks at step 06.
 
-Eight semantic slots (`--theme-surface`, `--theme-text`, `--theme-ring`, etc.) are derived from the
+Nine semantic slots (`--theme-surface`, `--theme-accent`, `--theme-text`, `--theme-ring`, etc.) are derived from the
 scale using `light-dark()` and are shared by all components. Theme variants (`data-theme="success"`,
 `"warning"`, `"error"`) swap `--theme-hue` and `--theme-chroma` on their element; the formula
 re-evaluates locally so each themed element gets its own full palette without affecting the page.
diff --git a/app/assets/styles/setup/03.theming/_theme-slots.css b/app/assets/styles/setup/03.theming/_theme-slots.css
index 90548e04..7dc306f2 100644
--- a/app/assets/styles/setup/03.theming/_theme-slots.css
+++ b/app/assets/styles/setup/03.theming/_theme-slots.css
@@ -2,12 +2,15 @@
    Declared on the same selector as theme-ramp.css so the formula re-evaluates
    per [data-theme] element rather than being inherited from html. */
 :where(html, [data-theme], [data-invalid]) {
-  --theme-surface:          light-dark(var(--colour-theme-9), var(--colour-theme-7));
-  --theme-surface-hover:    light-dark(var(--colour-theme-8), var(--colour-theme-6));
-  --theme-surface-subtle:   light-dark(var(--colour-theme-1), var(--colour-theme-9));
-  --theme-border:           light-dark(var(--colour-theme-6), var(--colour-theme-5));
-  --theme-border-focus:     light-dark(var(--colour-theme-4), var(--colour-theme-3));
-  --theme-ring:             var(--colour-theme-2);
-  --theme-on-surface:       var(--colour-theme-0);
-  --theme-text:             light-dark(var(--colour-theme-9), var(--colour-theme-2));
+  --theme-surface: light-dark(var(--colour-theme-7), var(--colour-theme-9));
+  --theme-surface-inverted: light-dark(var(--colour-theme-9), var(--colour-theme-2));
+  --theme-surface-hover: light-dark(var(--colour-theme-9), var(--colour-theme-7));
+  --theme-accent: light-dark(var(--colour-theme-5), var(--colour-theme-4));
+  --theme-surface-subtle: light-dark(var(--colour-theme-1), var(--colour-theme-9));
+  --theme-border: light-dark(var(--colour-theme-6), var(--colour-theme-5));
+  --theme-border-focus: light-dark(var(--colour-theme-4), var(--colour-theme-3));
+  --theme-ring: light-dark(var(--colour-theme-1), var(--colour-theme-9));
+  --theme-on-surface: var(--colour-theme-0);
+  --theme-text: light-dark(var(--colour-theme-9), var(--colour-theme-2));
+  --theme-text-inverted: light-dark(var(--colour-theme-9), var(--colour-theme-7));
 }
diff --git a/app/assets/styles/setup/04.elements/forms/06.button-geometry.css b/app/assets/styles/setup/04.elements/forms/06.button-geometry.css
index 6d1d010d..9dd36a7d 100644
--- a/app/assets/styles/setup/04.elements/forms/06.button-geometry.css
+++ b/app/assets/styles/setup/04.elements/forms/06.button-geometry.css
@@ -2,7 +2,7 @@
   --button-padding-block: 1rem;
   --button-padding-inline: 1.8rem;
 
-  --button-border-radius: 0.8rem;
+  --button-border-radius: 0.2rem;
   --button-border-radius-icon-only: 100vw;
 
   --button-border-width: 0.1rem;
diff --git a/app/components/01.atoms/prompt/DisplayPrompt.vue b/app/components/01.atoms/prompt/DisplayPrompt.vue
index 4cc9efc5..0b29e201 100644
--- a/app/components/01.atoms/prompt/DisplayPrompt.vue
+++ b/app/components/01.atoms/prompt/DisplayPrompt.vue
@@ -7,45 +7,43 @@
     tabindex="0"
   >
     <div class="display-prompt-wrapper" :data-theme="theme" :class="[elementClasses]" data-test-id="display-prompt">
-      <div class="display-prompt-inner">
-        <div class="display-prompt-icon" data-test-id="prompt-icon" aria-hidden="true">
-          <slot name="customDecoratorIcon">
-            <Icon :name="themeIcons[theme]" class="icon" />
-          </slot>
-        </div>
-        <div class="display-prompt-content" :aria-live="useAutoFocus ? 'polite' : undefined">
-          <p class="title" data-test-id="display-prompt-title">
-            <slot name="title"></slot>
-          </p>
-          <p v-if="slots.content" class="text" data-test-id="display-prompt-content">
-            <slot name="content"></slot>
-          </p>
-        </div>
-        <button
-          v-if="dismissible"
-          data-test-id="display-prompt-action"
-          class="display-prompt-action"
-          @click.prevent="updateComponentState()"
-        >
-          <slot name="customCloseIcon">
-            <Icon name="bitcoin-icons:cross-filled" class="icon" />
-          </slot>
-          <span class="sr-only">
-            <slot name="customTitle">Close this prompt</slot>
-          </span>
-        </button>
-      </div>
+      <component
+        :is="contentComponent"
+        :theme="theme"
+        :dismissible="dismissible"
+        :aria-live="useAutoFocus ? 'polite' : undefined"
+        @dismiss="updateComponentState()"
+      >
+        <template v-if="slots.customDecoratorIcon" #icon>
+          <slot name="customDecoratorIcon"></slot>
+        </template>
+        <template v-if="slots.title" #title>
+          <slot name="title"></slot>
+        </template>
+        <template v-if="slots.content" #content>
+          <slot name="content"></slot>
+        </template>
+        <template v-if="slots.customCloseIcon" #dismissIcon>
+          <slot name="customCloseIcon"></slot>
+        </template>
+        <template #dismissLabel>
+          <slot name="customTitle">Close this prompt</slot>
+        </template>
+      </component>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import AlertContent from "~/components/02.molecules/alert-content/AlertContent.vue";
+import AlertMaskedContent from "~/components/02.molecules/alert-masked-content/AlertMaskedContent.vue";
 import type { DisplayPromptTheme } from "~/types/components";
 
 interface Props {
   theme?: DisplayPromptTheme;
   dismissible?: boolean;
   useAutoFocus?: boolean;
+  masked?: boolean;
   styleClassPassthrough?: string | string[];
 }
 
@@ -53,15 +51,11 @@ const props = withDefaults(defineProps<Props>(), {
   theme: "info",
   dismissible: false,
   useAutoFocus: false,
+  masked: false,
   styleClassPassthrough: () => [],
 });
 
-const themeIcons: Record<DisplayPromptTheme, string> = {
-  info: "akar-icons:info",
-  success: "akar-icons:check",
-  warning: "akar-icons:circle-alert",
-  error: "akar-icons:circle-alert",
-};
+const contentComponent = computed(() => (props.masked ? AlertMaskedContent : AlertContent));
 
 const slots = useSlots();
 const promptElementRef = useTemplateRef<HTMLElement>("promptElementRef");
@@ -100,104 +94,7 @@ onMounted(async () => {
     }
 
     .display-prompt-wrapper {
-      background-color: var(--theme-surface);
-      border: 0px solid transparent;
-      border-radius: 4px;
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-      padding-inline-start: 8px;
-
       overflow: hidden;
-
-      &.outlined {
-        border: 1px solid var(--theme-border);
-      }
-
-      .display-prompt-inner {
-        align-items: center;
-        display: flex;
-        gap: 12px;
-        justify-content: space-between;
-        padding-block: 1rem;
-        padding-inline: 1.5rem;
-
-        border-start-start-radius: 8px;
-        border-end-start-radius: 8px;
-        background-color: light-dark(var(--colour-theme-0), var(--colour-theme-10));
-
-        .display-prompt-icon {
-          display: inline-flex;
-          .icon {
-            color: var(--theme-surface);
-            display: inline-block;
-            font-size: 3rem;
-            font-style: normal;
-            font-weight: normal;
-            overflow: hidden;
-          }
-        }
-
-        .display-prompt-content {
-          display: block flex;
-          flex-direction: column;
-          flex-grow: 1;
-          gap: 1rem;
-          margin: 0;
-          padding: 0.2rem;
-
-          .title {
-            font-size: var(--step-5);
-            font-weight: bold;
-            line-height: 1.3;
-            color: var(--theme-text);
-            margin: 0;
-            padding: 0;
-          }
-
-          .text {
-            font-size: var(--step-4);
-            font-weight: normal;
-            line-height: 1.3;
-            color: var(--theme-text);
-            margin: 0;
-            padding: 0;
-          }
-        }
-        .display-prompt-action {
-          background-color: transparent;
-          display: block flex;
-          align-items: center;
-          justify-content: center;
-          margin: 1rem;
-          padding: 0.5rem;
-          border: 0.1rem solid var(--theme-border);
-          border-radius: 50%;
-          outline: 1px solid var(--theme-ring);
-
-          transition:
-            border 200ms ease-in-out,
-            outline 200ms ease-in-out;
-
-          &:hover {
-            cursor: pointer;
-            border: 0.1rem solid var(--theme-surface);
-            outline: 2px solid var(--theme-border-focus);
-          }
-
-          &:focus-visible {
-            box-shadow: var(--focus-box-shadow-colour-on);
-            border: 0.1rem solid var(--theme-surface);
-            outline: 2px solid var(--theme-border-focus);
-          }
-
-          .icon {
-            color: var(--theme-text);
-            display: block;
-            font-size: var(--step-5);
-            padding: 1rem;
-          }
-        }
-      }
     }
   }
 }
diff --git a/app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts b/app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts
index 12c621f7..2466d86b 100644
--- a/app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts
+++ b/app/components/01.atoms/prompt/stories/DisplayPrompt.stories.ts
@@ -24,7 +24,7 @@ export default {
     },
     styleClassPassthrough: {
       control: { type: "object" },
-      description: "Extra classes applied to the prompt wrapper. Supported modifier: 'outlined' (adds a border).",
+      description: "Extra classes applied to the prompt wrapper",
       table: { category: "Styling" },
     },
     modelValue: { table: { disable: true } },
@@ -65,28 +65,24 @@ export const InfoTheme = Template.bind({});
 InfoTheme.args = {
   theme: "info",
   dismissible: true,
-  styleClassPassthrough: ["outlined"],
 };
 
 export const SuccessTheme = Template.bind({});
 SuccessTheme.args = {
   theme: "success",
   dismissible: true,
-  styleClassPassthrough: ["outlined"],
 };
 
 export const WarningTheme = Template.bind({});
 WarningTheme.args = {
   theme: "warning",
   dismissible: true,
-  styleClassPassthrough: ["outlined"],
 };
 
 export const ErrorTheme = Template.bind({});
 ErrorTheme.args = {
   theme: "error",
   dismissible: true,
-  styleClassPassthrough: ["outlined"],
 };
 
 export const Dismissible = Template.bind({});
@@ -95,13 +91,6 @@ Dismissible.args = {
   dismissible: true,
 };
 
-export const Outlined = Template.bind({});
-Outlined.args = {
-  theme: "info",
-  dismissible: true,
-  styleClassPassthrough: ["outlined"],
-};
-
 export const AllThemesDismissible: StoryFn<typeof StorybookComponent> = () => ({
   components: { StorybookComponent },
   setup() {
@@ -114,7 +103,6 @@ export const AllThemesDismissible: StoryFn<typeof StorybookComponent> = () => ({
         :key="theme"
         :theme="theme"
         :dismissible="true"
-        :style-class-passthrough="['outlined']"
       >
         <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }} prompt</template>
         <template #content>This is the {{ theme }} variant of the prompt component.</template>
diff --git a/app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts b/app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts
index 42fb0716..d8f3832b 100644
--- a/app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts
+++ b/app/components/01.atoms/prompt/tests/DisplayPrompt.spec.ts
@@ -65,7 +65,7 @@ describe("DisplayPrompt", () => {
 
   it("renders the icon region", async () => {
     const w = await mountSuspended(DisplayPrompt);
-    expect(w.find("[data-test-id='prompt-icon']").exists()).toBe(true);
+    expect(w.find("[data-test-id='alert-icon']").exists()).toBe(true);
   });
 
   it("renders a custom icon via the customDecoratorIcon slot", async () => {
@@ -81,39 +81,39 @@ describe("DisplayPrompt", () => {
     const w = await mountSuspended(DisplayPrompt, {
       slots: { title: "Important notice" },
     });
-    expect(w.find("[data-test-id='display-prompt-title']").text()).toContain("Important notice");
+    expect(w.find("[data-test-id='alert-title']").text()).toContain("Important notice");
   });
 
   it("renders content slot when provided", async () => {
     const w = await mountSuspended(DisplayPrompt, {
       slots: { content: "Detailed explanation here" },
     });
-    expect(w.find("[data-test-id='display-prompt-content']").exists()).toBe(true);
-    expect(w.find("[data-test-id='display-prompt-content']").text()).toContain("Detailed explanation here");
+    expect(w.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(w.find("[data-test-id='alert-content']").text()).toContain("Detailed explanation here");
   });
 
   it("does not render content element when content slot is empty", async () => {
     const w = await mountSuspended(DisplayPrompt);
-    expect(w.find("[data-test-id='display-prompt-content']").exists()).toBe(false);
+    expect(w.find("[data-test-id='alert-content']").exists()).toBe(false);
   });
 
   // ─── Dismiss button ───────────────────────────────────────────────────────
 
   it("does not render the dismiss button when dismissible is false", async () => {
     const w = await mountSuspended(DisplayPrompt, { props: { dismissible: false } });
-    expect(w.find("[data-test-id='display-prompt-action']").exists()).toBe(false);
+    expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
   });
 
   it("renders the dismiss button when dismissible is true", async () => {
     const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
-    expect(w.find("[data-test-id='display-prompt-action']").exists()).toBe(true);
+    expect(w.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
   });
 
   // ─── Dismiss behaviour (no parent model) ─────────────────────────────────
 
   it("adds the closed class after the dismiss button is clicked", async () => {
     const w = await mountSuspended(DisplayPrompt, { props: { dismissible: true } });
-    await w.find("[data-test-id='display-prompt-action']").trigger("click");
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
     await nextTick();
     expect(root(w).classes()).toContain("closed");
   });
@@ -124,7 +124,7 @@ describe("DisplayPrompt", () => {
     const w = await mountSuspended(DisplayPrompt, {
       props: { dismissible: true, modelValue: true },
     });
-    await w.find("[data-test-id='display-prompt-action']").trigger("click");
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
     await nextTick();
     const emitted = w.emitted("update:modelValue");
     expect(emitted).toBeTruthy();
@@ -135,7 +135,7 @@ describe("DisplayPrompt", () => {
     const w = await mountSuspended(DisplayPrompt, {
       props: { dismissible: true, modelValue: true },
     });
-    await w.find("[data-test-id='display-prompt-action']").trigger("click");
+    await w.find("[data-test-id='alert-dismiss']").trigger("click");
     await nextTick();
     // componentOpen is unchanged — parent controls visibility via modelValue
     expect(root(w).classes()).not.toContain("closed");
diff --git a/app/components/01.atoms/toast/DisplayToast.vue b/app/components/01.atoms/toast/DisplayToast.vue
index b8c2d90c..138e7503 100644
--- a/app/components/01.atoms/toast/DisplayToast.vue
+++ b/app/components/01.atoms/toast/DisplayToast.vue
@@ -4,14 +4,7 @@
       v-if="privateDisplayToast"
       ref="toastElementRef"
       class="display-toast"
-      :class="[
-        elementClasses,
-        cssStateClass,
-        positionClasses,
-        {
-          'has-theme': !slots.default,
-        },
-      ]"
+      :class="[elementClasses, cssStateClass, positionClasses]"
       :data-theme="theme"
       :role="toastRole"
       :aria-live="ariaLive"
@@ -21,33 +14,33 @@
     >
       <slot v-if="slots.default"></slot>
 
-      <DefaultToastContent
+      <component
+        :is="contentComponent"
         v-else
         :theme="theme"
         :custom-icon="customIcon"
-        :toast-id="toastId"
-        :toast-display-text="toastDisplayText"
-        :toast-title="toastTitle"
-        :toast-description="toastDescription"
-        :auto-dismiss="autoDismiss"
-        :set-dismiss-toast="setDismissToast"
+        :content-id="'toast-message-' + toastId"
+        :dismissible="!autoDismiss"
+        @dismiss="setDismissToast"
       >
-        <template v-if="slots.customToastIcon" #customToastIcon>
+        <template v-if="slots.customToastIcon" #icon>
           <slot name="customToastIcon"></slot>
         </template>
-        <template v-if="slots.title" #title>
-          <slot name="title"></slot>
+        <template v-if="slots.title || toastTitle || toastDisplayText" #title>
+          <slot name="title">{{ toastTitle || toastDisplayText }}</slot>
         </template>
-        <template v-if="slots.description" #description>
-          <slot name="description"></slot>
+        <template v-if="slots.description || toastDescription" #content>
+          <slot name="description">{{ toastDescription }}</slot>
         </template>
-      </DefaultToastContent>
+      </component>
       <div v-if="autoDismiss" class="display-toast-progress"></div>
     </div>
   </Teleport>
 </template>
 
 <script setup lang="ts">
+import AlertContent from "~/components/02.molecules/alert-content/AlertContent.vue";
+import AlertMaskedContent from "~/components/02.molecules/alert-masked-content/AlertMaskedContent.vue";
 import type {
   DisplayToastConfig,
   DisplayToastTheme,
@@ -91,6 +84,8 @@ const theme = computed(() => props.config?.appearance?.theme ?? "info");
 const position = computed(() => props.config?.appearance?.position ?? "top");
 const alignment = computed(() => props.config?.appearance?.alignment ?? "right");
 const fullWidth = computed(() => props.config?.appearance?.fullWidth ?? false);
+const masked = computed(() => props.config?.appearance?.masked ?? false);
+const contentComponent = computed(() => (masked.value ? AlertMaskedContent : AlertContent));
 const autoDismiss = computed(() => props.config?.behavior?.autoDismiss ?? true);
 const duration = computed(() => props.config?.behavior?.duration ?? 5000);
 const revealDuration = computed(() => props.config?.behavior?.revealDuration ?? 550);
@@ -335,22 +330,6 @@ onBeforeRouteLeave(() => {
       transform: translateY(30px);
     }
 
-    /*
-  * Styles for the display toast component if slot is empty
-  */
-    &.has-theme {
-      padding-inline-start: 6px;
-      background-color: var(--theme-surface);
-
-      border: 0.1rem solid var(--theme-border);
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-      border-start-end-radius: 4px;
-      border-end-end-radius: 4px;
-
-      overflow: hidden;
-    }
-
     .display-toast-progress {
       position: absolute;
       inset-block-end: 4px;
@@ -358,7 +337,7 @@ onBeforeRouteLeave(() => {
       height: 3px;
       transform: scaleX(0);
       transform-origin: right;
-      background: var(--theme-surface);
+      background: var(--theme-accent);
       border-radius: inherit;
       animation: progress v-bind(displayDurationMs) linear forwards;
     }
diff --git a/app/components/01.atoms/toast/DisplayToastProvider.vue b/app/components/01.atoms/toast/DisplayToastProvider.vue
index 60e590f8..b7653b7a 100644
--- a/app/components/01.atoms/toast/DisplayToastProvider.vue
+++ b/app/components/01.atoms/toast/DisplayToastProvider.vue
@@ -11,7 +11,7 @@
       <div
         v-for="entry in visibleEntries"
         :key="entry.id"
-        class="display-toast-provider-item has-theme"
+        class="display-toast-provider-item"
         :style="{
           '--_reveal': revealDurationFor(entry) + 'ms',
           '--_duration': displayDurationFor(entry) + 'ms',
@@ -23,16 +23,21 @@
         :aria-describedby="'toast-message-' + entry.id"
         @keydown.escape="handleDismiss(entry.id)"
       >
-        <DefaultToastContent
+        <component
+          :is="maskedFor(entry) ? AlertMaskedContent : AlertContent"
           :theme="themeFor(entry)"
           :custom-icon="entry.config.content?.customIcon"
-          :toast-id="entry.id"
-          :toast-display-text="entry.config.content?.text ?? ''"
-          :toast-title="entry.config.content?.title ?? ''"
-          :toast-description="entry.config.content?.description ?? ''"
-          :auto-dismiss="autoDismissFor(entry)"
-          :set-dismiss-toast="() => handleDismiss(entry.id)"
-        />
+          :content-id="'toast-message-' + entry.id"
+          :dismissible="!autoDismissFor(entry)"
+          @dismiss="handleDismiss(entry.id)"
+        >
+          <template v-if="entry.config.content?.title || entry.config.content?.text" #title>
+            {{ entry.config.content?.title || entry.config.content?.text }}
+          </template>
+          <template v-if="entry.config.content?.description" #content>
+            {{ entry.config.content?.description }}
+          </template>
+        </component>
         <div v-if="autoDismissFor(entry)" class="display-toast-provider-progress"></div>
       </div>
     </TransitionGroup>
@@ -40,6 +45,8 @@
 </template>
 
 <script setup lang="ts">
+import AlertContent from "~/components/02.molecules/alert-content/AlertContent.vue";
+import AlertMaskedContent from "~/components/02.molecules/alert-masked-content/AlertMaskedContent.vue";
 import type {
   DisplayToastTheme,
   DisplayToastPosition,
@@ -68,11 +75,11 @@ const visibleEntries = computed<ToastQueueEntry[]>(() =>
 );
 
 const themeFor = (entry: ToastQueueEntry): DisplayToastTheme => entry.config.appearance?.theme ?? "info";
+const maskedFor = (entry: ToastQueueEntry) => entry.config.appearance?.masked ?? false;
 const autoDismissFor = (entry: ToastQueueEntry) => entry.config.behavior?.autoDismiss ?? true;
 const displayDurationFor = (entry: ToastQueueEntry) => entry.config.behavior?.duration ?? 5000;
 const revealDurationFor = (entry: ToastQueueEntry) => entry.config.behavior?.revealDuration ?? 550;
-const roleFor = (entry: ToastQueueEntry) =>
-  ["error", "warning"].includes(themeFor(entry)) ? "alert" : "status";
+const roleFor = (entry: ToastQueueEntry) => (["error", "warning"].includes(themeFor(entry)) ? "alert" : "status");
 const ariaLiveFor = (entry: ToastQueueEntry) =>
   ["error", "warning"].includes(themeFor(entry)) ? "assertive" : "polite";
 
@@ -121,7 +128,6 @@ watch(
   { immediate: true }
 );
 
-
 let _leavingCount = 0;
 let _containerEl: HTMLElement | null = null;
 
@@ -340,17 +346,6 @@ onUnmounted(() => {
       transition: transform 0.3s ease;
     }
 
-    &.has-theme {
-      padding-inline-start: 6px;
-      background-color: var(--theme-surface);
-      border: 0.1rem solid var(--theme-border);
-      border-start-start-radius: 8px;
-      border-end-start-radius: 8px;
-      border-start-end-radius: 4px;
-      border-end-end-radius: 4px;
-      overflow: hidden;
-    }
-
     .display-toast-provider-progress {
       position: absolute;
       inset-block-end: 4px;
@@ -358,7 +353,7 @@ onUnmounted(() => {
       height: 3px;
       transform: scaleX(0);
       transform-origin: right;
-      background: var(--theme-surface);
+      background: var(--theme-accent);
       border-radius: inherit;
       animation: progress var(--_duration) linear forwards;
     }
diff --git a/app/components/01.atoms/toast/molecules/DefaultToastContent.vue b/app/components/01.atoms/toast/molecules/DefaultToastContent.vue
deleted file mode 100644
index a7075d37..00000000
--- a/app/components/01.atoms/toast/molecules/DefaultToastContent.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<template>
-  <div class="display-toast-inner">
-    <div class="toast-icon" aria-hidden="true">
-      <slot name="customToastIcon">
-        <Icon :name="customIcon || defaultThemeIcons[theme] || 'akar-icons:info'" class="icon" />
-      </slot>
-    </div>
-    <div :id="'toast-message-' + toastId" class="toast-message">
-      <template v-if="slots.title || slots.description || toastTitle || toastDescription">
-        <p v-if="slots.title || toastTitle" class="title" data-test-id="toast-title">
-          <slot name="title">{{ toastTitle }}</slot>
-        </p>
-        <p v-if="slots.description || toastDescription" class="description" data-test-id="toast-description">
-          <slot name="description">{{ toastDescription }}</slot>
-        </p>
-      </template>
-      <template v-else>
-        {{ toastDisplayText }}
-      </template>
-    </div>
-
-    <div v-if="!autoDismiss" class="toast-action">
-      <button @click.prevent="setDismissToast()">
-        <Icon name="material-symbols:close" class="icon" />
-        <span class="sr-only">Close</span>
-      </button>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { DisplayToastTheme } from "~/types/components";
-
-interface Props {
-  theme: DisplayToastTheme;
-  customIcon?: string;
-  toastId: string;
-  toastDisplayText: string;
-  toastTitle?: string;
-  toastDescription?: string;
-  autoDismiss: boolean;
-  setDismissToast: () => void;
-}
-
-defineProps<Props>();
-
-const defaultThemeIcons = {
-  info: "akar-icons:info",
-  success: "akar-icons:check",
-  warning: "akar-icons:circle-alert",
-  error: "akar-icons:circle-alert",
-};
-
-const slots = useSlots();
-</script>
-
-<style lang="css">
-@layer components {
-.display-toast-inner {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  gap: 12px;
-  align-items: center;
-  background-color: light-dark(var(--colour-theme-0), var(--colour-theme-10));
-  border-start-start-radius: 8px;
-  border-end-start-radius: 8px;
-  padding: 12px 14px;
-  overflow: hidden;
-
-  .toast-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    margin-right: 12px;
-
-    .icon {
-      color: var(--theme-surface);
-      display: inline-block;
-      font-size: 2.5rem;
-      font-style: normal;
-      font-weight: normal;
-      overflow: hidden;
-    }
-  }
-
-  .toast-message {
-    display: flex;
-    align-items: center;
-    gap: var(--step-1);
-    font-size: var(--step-4);
-    font-weight: normal;
-    line-height: 1.3;
-    color: var(--theme-text);
-    margin: 0;
-    padding: 0;
-
-    .title {
-      margin: 0;
-      font-weight: 600;
-      font-size: var(--step-4);
-      line-height: 1.2;
-    }
-
-    .description {
-      margin: 0;
-      font-size: var(--step-3);
-      line-height: 1.4;
-      opacity: 0.9;
-    }
-
-    /* When using slots, change flex direction to column */
-    &:has(.title, .text) {
-      flex-direction: column;
-      align-items: flex-start;
-    }
-  }
-
-  .toast-action {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-left: 12px;
-
-    button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: light-dark(var(--colour-theme-1), var(--colour-theme-9));
-      border: 0.1rem solid var(--theme-border);
-      outline: 0.1rem solid transparent;
-      border-radius: 50%;
-      box-shadow: none;
-      color: var(--theme-text);
-      cursor: pointer;
-      font-size: var(--step-4);
-      font-weight: bold;
-      padding: 0.5rem;
-      text-decoration: underline;
-
-      transition: all 0.3s ease;
-
-      .icon {
-        font-size: 1.5rem;
-        vertical-align: middle;
-      }
-
-      &:hover,
-      &:focus-visible {
-        box-shadow: none;
-        background-color: var(--theme-surface);
-        color: var(--theme-on-surface);
-        outline: 0.1rem solid var(--theme-ring);
-        outline-offset: 0.2rem;
-      }
-    }
-  }
-}
-}
-</style>
diff --git a/app/components/01.atoms/toast/stories/DisplayToast.stories.ts b/app/components/01.atoms/toast/stories/DisplayToast.stories.ts
index 4aba1abb..c0e69bc9 100644
--- a/app/components/01.atoms/toast/stories/DisplayToast.stories.ts
+++ b/app/components/01.atoms/toast/stories/DisplayToast.stories.ts
@@ -2,7 +2,6 @@ import type { Meta, StoryFn } from "@nuxtjs/storybook";
 import { ref, onMounted } from "vue";
 import StorybookComponent from "../DisplayToast.vue";
 
-// Custom interface for story args
 interface ToastStoryArgs {
   theme: "info" | "success" | "warning" | "error";
   position: "top" | "bottom";
@@ -11,153 +10,70 @@ interface ToastStoryArgs {
   autoDismiss: boolean;
   duration: number;
   revealDuration: number;
-  text: string;
+  title: string;
+  description: string;
   customIcon: string;
-  // DisplayPrompt specific props
-  usePrompt: boolean;
-  promptTheme: "info" | "success" | "warning" | "error";
-  dismissible: boolean;
-  promptTitle: string;
-  promptContent: string;
-  useAutoFocus: boolean;
-  styleClassPassthrough: string[];
 }
 
 export default {
   title: "Atoms/DisplayToast",
   component: StorybookComponent,
   argTypes: {
-    // Appearance Config
     theme: {
       control: { type: "select" },
       options: ["info", "success", "warning", "error"],
       description: "Toast theme/variant",
-      table: {
-        category: "Appearance",
-      },
+      table: { category: "Appearance" },
     },
     position: {
       control: { type: "select" },
       options: ["top", "bottom"],
       description: "Vertical position of toast",
-      table: {
-        category: "Appearance",
-      },
+      table: { category: "Appearance" },
     },
     alignment: {
       control: { type: "select" },
       options: ["left", "center", "right"],
       description: "Horizontal alignment of toast",
-      table: {
-        category: "Appearance",
-      },
+      table: { category: "Appearance" },
     },
     fullWidth: {
       control: { type: "boolean" },
       description: "Whether toast spans full width",
-      table: {
-        category: "Appearance",
-      },
+      table: { category: "Appearance" },
     },
-    // Behavior Config
     autoDismiss: {
       control: { type: "boolean" },
       description: "Auto dismiss toast after duration",
-      table: {
-        category: "Behavior",
-      },
+      table: { category: "Behaviour" },
     },
     duration: {
       control: { type: "range", min: 1000, max: 10000, step: 500 },
       description: "Auto dismiss duration in milliseconds",
-      table: {
-        category: "Behavior",
-      },
+      table: { category: "Behaviour" },
     },
     revealDuration: {
       control: { type: "range", min: 100, max: 1000, step: 50 },
       description: "Animation duration for reveal/hide",
-      table: {
-        category: "Behavior",
-      },
+      table: { category: "Behaviour" },
     },
-    // Content Config
-    text: {
+    title: {
       control: { type: "text" },
-      description: "Toast message text",
-      table: {
-        category: "Content",
-      },
+      description: "Toast title text",
+      table: { category: "Content" },
     },
-    customIcon: {
-      control: { type: "text" },
-      description: "Custom icon name (e.g., 'akar-icons:check-box')",
-      table: {
-        category: "Content",
-      },
-    },
-    // DisplayPrompt Config
-    usePrompt: {
-      control: { type: "boolean" },
-      description: "Use DisplayPrompt instead of simple text",
-      table: {
-        category: "Prompt",
-      },
-    },
-    promptTheme: {
-      control: { type: "select" },
-      options: ["info", "success", "warning", "error"],
-      description: "Theme for DisplayPrompt",
-      table: {
-        category: "Prompt",
-      },
-    },
-    dismissible: {
-      control: { type: "boolean" },
-      description: "Whether DisplayPrompt is dismissible",
-      table: {
-        category: "Prompt",
-      },
-    },
-    promptTitle: {
+    description: {
       control: { type: "text" },
-      description: "Title for DisplayPrompt",
-      table: {
-        category: "Prompt",
-      },
+      description: "Toast description text shown below the title",
+      table: { category: "Content" },
     },
-    promptContent: {
+    customIcon: {
       control: { type: "text" },
-      description: "Content for DisplayPrompt",
-      table: {
-        category: "Prompt",
-      },
-    },
-    useAutoFocus: {
-      control: { type: "boolean" },
-      description: "Auto focus DisplayPrompt",
-      table: {
-        category: "Prompt",
-      },
-    },
-    styleClassPassthrough: {
-      control: { type: "object" },
-      description: "Style classes for DisplayPrompt (e.g., ['dark', 'outlined'])",
-      table: {
-        category: "Prompt",
-      },
-    },
-    // Hide complex internal props
-    config: {
-      table: {
-        disable: true,
-      },
-    },
-    modelValue: {
-      table: {
-        disable: true,
-      },
+      description: "Custom icon name (Iconify, e.g. 'akar-icons:check-box')",
+      table: { category: "Content" },
     },
+    config: { table: { disable: true } },
+    modelValue: { table: { disable: true } },
   },
   args: {
     theme: "info",
@@ -167,26 +83,17 @@ export default {
     autoDismiss: false,
     duration: 3000,
     revealDuration: 300,
-    text: "This is a toast notification message",
+    title: "Notification",
+    description: "This is a toast notification message.",
     customIcon: "",
-    usePrompt: false,
-    promptTheme: "info",
-    dismissible: true,
-    promptTitle: "Prompt Title",
-    promptContent: "This is prompt content, it can contain html or plain text.",
-    useAutoFocus: false,
-    styleClassPassthrough: ["dark", "outlined"],
   },
 } as Meta<ToastStoryArgs>;
 
 const Template: StoryFn<ToastStoryArgs> = (args) => ({
-  components: {
-    StorybookComponent,
-  },
+  components: { StorybookComponent },
   setup() {
     const isActive = ref(false);
 
-    // Auto-trigger toast for demo
     onMounted(() => {
       setTimeout(() => {
         isActive.value = true;
@@ -197,10 +104,6 @@ const Template: StoryFn<ToastStoryArgs> = (args) => ({
   },
   template: `
     <div style="position: relative; height: 200px; padding: 20px;">
-      <p style="margin-bottom: 20px;">Toast will appear and demonstrate the configured behavior:</p>
-      <p v-if="args.usePrompt" style="margin-bottom: 10px; font-style: italic; color: #666;">
-        Note: DisplayPrompt examples require component to be properly loaded in the environment.
-      </p>
       <button
         @click="isActive = true"
         style="padding: 8px 16px; background: #0066cc; color: white; border: none; border-radius: 4px; cursor: pointer;"
@@ -215,18 +118,17 @@ const Template: StoryFn<ToastStoryArgs> = (args) => ({
             theme: args.theme,
             position: args.position,
             alignment: args.alignment,
-            fullWidth: args.fullWidth
+            fullWidth: args.fullWidth,
           },
           behavior: {
             autoDismiss: args.autoDismiss,
             duration: args.duration,
-            revealDuration: args.revealDuration
+            revealDuration: args.revealDuration,
           },
-          content: args.usePrompt ? {
-            text: args.promptTitle + ': ' + args.promptContent
-          } : {
-            text: args.text,
-            ...(args.customIcon && { customIcon: args.customIcon })
+          content: {
+            title: args.title,
+            description: args.description,
+            ...(args.customIcon && { customIcon: args.customIcon }),
           },
         }"
       />
@@ -239,142 +141,55 @@ export const Default = Template.bind({});
 export const SuccessToast = Template.bind({});
 SuccessToast.args = {
   theme: "success",
-  text: "Success! Your action was completed.",
+  title: "Changes saved",
+  description: "Your changes have been saved successfully.",
   customIcon: "akar-icons:check-box",
   autoDismiss: false,
-  duration: 4000,
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
-  revealDuration: 300,
 };
 
 export const ErrorToast = Template.bind({});
 ErrorToast.args = {
   theme: "error",
-  text: "Error! Something went wrong.",
+  title: "Something went wrong",
+  description: "Please try again or contact support if the problem persists.",
   autoDismiss: false,
   position: "top",
   alignment: "center",
-  fullWidth: false,
-  duration: 3000,
-  revealDuration: 300,
-  customIcon: "",
 };
 
-export const BottomCenterToast = Template.bind({});
-BottomCenterToast.args = {
-  theme: "info",
-  text: "Info message at bottom center",
-  position: "bottom",
-  alignment: "center",
-  autoDismiss: false,
-  duration: 5000,
-  fullWidth: false,
-  revealDuration: 300,
-  customIcon: "",
-};
-
-export const FullWidthToast = Template.bind({});
-FullWidthToast.args = {
+export const WarningToast = Template.bind({});
+WarningToast.args = {
   theme: "warning",
-  text: "Full width warning message",
-  fullWidth: true,
-  position: "top",
-  alignment: "left",
-  autoDismiss: false,
-  duration: 6000,
-  revealDuration: 300,
-  customIcon: "",
-};
-
-// DisplayPrompt Examples - Based on Playground
-export const ErrorPromptToast = Template.bind({});
-ErrorPromptToast.args = {
-  theme: "error",
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
+  title: "Action required",
+  description: "Please review the highlighted fields before continuing.",
   autoDismiss: false,
-  duration: 5000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "error",
-  dismissible: false,
-  promptTitle: "Error Prompt Title with content",
-  promptContent: "This is an error prompt content, it can contain html or plain text.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark", "outlined"],
 };
 
-export const SuccessPromptToast = Template.bind({});
-SuccessPromptToast.args = {
-  theme: "success",
-  position: "top",
-  alignment: "right",
-  fullWidth: false,
-  autoDismiss: false,
+export const AutoDismiss = Template.bind({});
+AutoDismiss.args = {
+  theme: "info",
+  title: "Auto-dismissing",
+  description: "This toast will dismiss itself after 3 seconds.",
+  autoDismiss: true,
   duration: 3000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "success",
-  dismissible: true,
-  promptTitle: "Success Prompt Title with content (Dismissible)",
-  promptContent: "This is success prompt content, it can contain html or plain text.",
-  useAutoFocus: true,
-  styleClassPassthrough: ["dark", "outlined"],
 };
 
-export const InfoPromptFullWidth = Template.bind({});
-InfoPromptFullWidth.args = {
+export const BottomCenter = Template.bind({});
+BottomCenter.args = {
   theme: "info",
-  position: "top",
-  alignment: "center",
-  fullWidth: true,
-  autoDismiss: false,
-  duration: 4000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "info",
-  dismissible: false,
-  promptTitle: "Info Prompt Title with content (Auto Dismiss)",
-  promptContent: "This is info prompt content displayed full width.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark", "outlined"],
-};
-
-export const WarningPromptBottomCenter = Template.bind({});
-WarningPromptBottomCenter.args = {
-  theme: "warning",
+  title: "Bottom centre",
+  description: "Positioned at the bottom centre of the viewport.",
   position: "bottom",
   alignment: "center",
-  fullWidth: false,
   autoDismiss: false,
-  duration: 6000,
-  revealDuration: 300,
-  usePrompt: true,
-  promptTheme: "warning",
-  dismissible: true,
-  promptTitle: "Warning Prompt at Bottom Center",
-  promptContent: "This warning prompt appears at the bottom center with auto dismiss.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["outlined"],
 };
 
-export const InfoPromptCustomStyles = Template.bind({});
-InfoPromptCustomStyles.args = {
-  theme: "info",
+export const FullWidth = Template.bind({});
+FullWidth.args = {
+  theme: "warning",
+  title: "Full width warning",
+  description: "This toast spans the full width of the viewport.",
+  fullWidth: true,
   position: "top",
-  alignment: "left",
-  fullWidth: false,
   autoDismiss: false,
-  duration: 3000,
-  revealDuration: 500,
-  usePrompt: true,
-  promptTheme: "info",
-  dismissible: true,
-  promptTitle: "Info Prompt with Custom Styles",
-  promptContent: "This prompt uses custom style configurations and slower reveal animation.",
-  useAutoFocus: false,
-  styleClassPassthrough: ["dark"],
 };
diff --git a/app/components/01.atoms/toast/tests/DisplayToast.spec.ts b/app/components/01.atoms/toast/tests/DisplayToast.spec.ts
index abf262b5..181ff6ff 100644
--- a/app/components/01.atoms/toast/tests/DisplayToast.spec.ts
+++ b/app/components/01.atoms/toast/tests/DisplayToast.spec.ts
@@ -98,18 +98,6 @@ describe("DisplayToast", () => {
     expect(toast()!.classList).not.toContain("left");
   });
 
-  // ─── has-theme class ──────────────────────────────────────────────────────
-
-  it("has the has-theme class when no default slot is used", async () => {
-    await mountAndShow();
-    expect(toast()!.classList).toContain("has-theme");
-  });
-
-  it("does not have the has-theme class when a default slot is used", async () => {
-    await mountAndShow({}, { default: "<div>Custom</div>" });
-    expect(toast()!.classList).not.toContain("has-theme");
-  });
-
   // ─── tabindex / aria-describedby ──────────────────────────────────────────
 
   it("sets tabindex='0' when no default slot is used", async () => {
@@ -136,17 +124,17 @@ describe("DisplayToast", () => {
 
   it("renders text content from config", async () => {
     await mountAndShow({ config: { content: { text: "Hello toast" } } });
-    expect(document.querySelector(".toast-message")!.textContent).toContain("Hello toast");
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Hello toast");
   });
 
   it("renders title from config", async () => {
     await mountAndShow({ config: { content: { title: "Toast Title" } } });
-    expect(document.querySelector("[data-test-id='toast-title']")!.textContent).toContain("Toast Title");
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("Toast Title");
   });
 
   it("renders description from config", async () => {
     await mountAndShow({ config: { content: { description: "Toast description" } } });
-    expect(document.querySelector("[data-test-id='toast-description']")!.textContent).toContain(
+    expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain(
       "Toast description"
     );
   });
@@ -155,16 +143,16 @@ describe("DisplayToast", () => {
     await mountAndShow({
       config: { content: { title: "Title", description: "Desc" } },
     });
-    expect(document.querySelector("[data-test-id='toast-title']")).not.toBeNull();
-    expect(document.querySelector("[data-test-id='toast-description']")).not.toBeNull();
+    expect(document.querySelector("[data-test-id='alert-title']")).not.toBeNull();
+    expect(document.querySelector("[data-test-id='alert-content']")).not.toBeNull();
   });
 
   // ─── Default slot ─────────────────────────────────────────────────────────
 
-  it("renders default slot content instead of DefaultToastContent", async () => {
+  it("renders default slot content instead of AlertContent", async () => {
     await mountAndShow({}, { default: '<p class="custom-content">Custom</p>' });
     expect(document.querySelector(".custom-content")).not.toBeNull();
-    expect(document.querySelector(".display-toast-inner")).toBeNull();
+    expect(document.querySelector(".alert-content")).toBeNull();
   });
 
   // ─── Progress bar ─────────────────────────────────────────────────────────
@@ -183,12 +171,12 @@ describe("DisplayToast", () => {
 
   it("renders the close button in the toast content when autoDismiss is false", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
-    expect(document.querySelector(".toast-action button")).not.toBeNull();
+    expect(document.querySelector("[data-test-id='alert-dismiss']")).not.toBeNull();
   });
 
   it("does not render the close button when autoDismiss is true", async () => {
     await mountAndShow({ config: { behavior: { autoDismiss: true } } });
-    expect(document.querySelector(".toast-action")).toBeNull();
+    expect(document.querySelector("[data-test-id='alert-dismiss']")).toBeNull();
   });
 
   // ─── Dismiss via Escape key ────────────────────────────────────────────────
@@ -208,7 +196,7 @@ describe("DisplayToast", () => {
     await mountAndShow({ config: { behavior: { autoDismiss: false } } });
     vi.advanceTimersByTime(100);
     await nextTick();
-    (document.querySelector(".toast-action button") as HTMLElement).click();
+    (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
     expect(toast()!.classList).toContain("hide");
   });
diff --git a/app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts b/app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts
index dad613fe..cafd6fc7 100644
--- a/app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts
+++ b/app/components/01.atoms/toast/tests/DisplayToastProvider.spec.ts
@@ -60,21 +60,21 @@ describe("DisplayToastProvider", () => {
     await mountSuspended(DisplayToastProvider);
     show({ content: { text: "Toast message" } });
     await nextTick();
-    expect(document.querySelector(".toast-message")!.textContent).toContain("Toast message");
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Toast message");
   });
 
   it("renders the toast title", async () => {
     await mountSuspended(DisplayToastProvider);
     show({ content: { title: "My Title" } });
     await nextTick();
-    expect(document.querySelector("[data-test-id='toast-title']")!.textContent).toContain("My Title");
+    expect(document.querySelector("[data-test-id='alert-title']")!.textContent).toContain("My Title");
   });
 
   it("renders the toast description", async () => {
     await mountSuspended(DisplayToastProvider);
     show({ content: { description: "My description" } });
     await nextTick();
-    expect(document.querySelector("[data-test-id='toast-description']")!.textContent).toContain("My description");
+    expect(document.querySelector("[data-test-id='alert-content']")!.textContent).toContain("My description");
   });
 
   // ─── data-theme ───────────────────────────────────────────────────────────
@@ -158,7 +158,7 @@ describe("DisplayToastProvider", () => {
     show({ content: { text: "Second" } });
     await nextTick();
     expect(items().length).toBe(1);
-    expect(document.querySelector(".toast-message")!.textContent).toContain("First");
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("First");
   });
 
   it("shows up to maxVisible items simultaneously", async () => {
@@ -176,7 +176,7 @@ describe("DisplayToastProvider", () => {
     await mountSuspended(DisplayToastProvider);
     show({ behavior: { autoDismiss: false } });
     await nextTick();
-    (document.querySelector(".toast-action button") as HTMLElement).click();
+    (document.querySelector("[data-test-id='alert-dismiss']") as HTMLElement).click();
     await nextTick();
     expect(items().length).toBe(0);
   });
@@ -218,11 +218,11 @@ describe("DisplayToastProvider", () => {
     show({ content: { text: "First" }, behavior: { autoDismiss: false } });
     show({ content: { text: "Second" }, behavior: { autoDismiss: false } });
     await nextTick();
-    expect(document.querySelector(".toast-message")!.textContent).toContain("First");
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("First");
 
     item()!.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true }));
     await nextTick();
-    expect(document.querySelector(".toast-message")!.textContent).toContain("Second");
+    expect(document.querySelector(".alert-content-body")!.textContent).toContain("Second");
   });
 
   // ─── Progress bar ─────────────────────────────────────────────────────────
diff --git a/app/components/02.molecules/alert-content/AlertContent.vue b/app/components/02.molecules/alert-content/AlertContent.vue
new file mode 100644
index 00000000..0dd95c1f
--- /dev/null
+++ b/app/components/02.molecules/alert-content/AlertContent.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="alert-content" :data-theme="theme">
+    <AlertContentInner
+      :theme="theme"
+      :custom-icon="customIcon"
+      :dismissible="dismissible"
+      :content-id="contentId"
+      :aria-live="ariaLive"
+      @dismiss="emit('dismiss')"
+    >
+      <template v-if="slots.icon" #icon>
+        <slot name="icon"></slot>
+      </template>
+      <template v-if="slots.title" #title>
+        <slot name="title"></slot>
+      </template>
+      <template v-if="slots.content" #content>
+        <slot name="content"></slot>
+      </template>
+      <template v-if="slots.dismissIcon" #dismissIcon>
+        <slot name="dismissIcon"></slot>
+      </template>
+      <template v-if="slots.dismissLabel" #dismissLabel>
+        <slot name="dismissLabel"></slot>
+      </template>
+    </AlertContentInner>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+}
+
+withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-content {
+    background-color: var(--theme-accent);
+    border: 0.1rem solid var(--theme-border);
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    border-start-end-radius: 4px;
+    border-end-end-radius: 4px;
+    padding-inline-start: 6px;
+    overflow: hidden;
+
+  }
+}
+</style>
diff --git a/app/components/02.molecules/alert-content/AlertContentInner.vue b/app/components/02.molecules/alert-content/AlertContentInner.vue
new file mode 100644
index 00000000..8f2aac6f
--- /dev/null
+++ b/app/components/02.molecules/alert-content/AlertContentInner.vue
@@ -0,0 +1,145 @@
+<template>
+  <div class="alert-content-inner">
+    <div class="alert-content-icon" data-test-id="alert-icon" aria-hidden="true">
+      <slot name="icon">
+        <Icon :name="customIcon || defaultThemeIcons[theme]" class="icon" />
+      </slot>
+    </div>
+
+    <div :id="contentId" class="alert-content-body" :aria-live="ariaLive">
+      <p v-if="slots.title" class="title" data-test-id="alert-title">
+        <slot name="title"></slot>
+      </p>
+      <p v-if="slots.content" class="content" data-test-id="alert-content">
+        <slot name="content"></slot>
+      </p>
+    </div>
+
+    <button
+      v-if="dismissible"
+      type="button"
+      class="alert-content-dismiss"
+      data-test-id="alert-dismiss"
+      @click.prevent="emit('dismiss')"
+    >
+      <slot name="dismissIcon">
+        <Icon name="material-symbols:close" class="icon" />
+      </slot>
+      <span class="sr-only">
+        <slot name="dismissLabel">Close</slot>
+      </span>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+}
+
+withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+
+const defaultThemeIcons: Record<SemanticTheme, string> = {
+  info: "akar-icons:info",
+  success: "akar-icons:check",
+  warning: "akar-icons:circle-alert",
+  error: "akar-icons:circle-alert",
+};
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-content-inner {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    gap: 1.2rem;
+    align-items: center;
+    background-color: var(--_alert-content-inner-bg, var(--theme-surface-subtle));
+    border-start-start-radius: 8px;
+    border-end-start-radius: 8px;
+    padding: 1.2rem 1.5rem;
+    overflow: hidden;
+
+    .alert-content-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+
+      .icon {
+        color: var(--theme-text);
+        display: inline-block;
+        font-size: 2.5rem;
+        font-style: normal;
+        font-weight: normal;
+        overflow: hidden;
+      }
+    }
+
+    .alert-content-body {
+      display: flex;
+      flex-direction: column;
+      gap: 0.4rem;
+      color: var(--theme-text);
+
+      .title {
+        font-size: var(--step-4);
+        font-weight: 600;
+        line-height: 1.2;
+        margin: 0;
+      }
+
+      .content {
+        font-size: var(--step-3);
+        font-weight: normal;
+        line-height: 1.4;
+        margin: 0;
+        opacity: 0.9;
+      }
+    }
+
+    .alert-content-dismiss {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: 0.1rem solid var(--theme-border);
+      outline: 0.1rem solid transparent;
+      border-radius: 50%;
+      color: var(--theme-text);
+      cursor: pointer;
+      flex-shrink: 0;
+      padding: 0.5rem;
+      transition: all 200ms ease;
+
+      .icon {
+        color: inherit;
+        display: block;
+        font-size: 1.5rem;
+      }
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--theme-surface-hover);
+        color: var(--theme-on-surface);
+        outline: 0.1rem solid var(--theme-ring);
+        outline-offset: 0.2rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/app/components/02.molecules/alert-content/stories/AlertContent.stories.ts b/app/components/02.molecules/alert-content/stories/AlertContent.stories.ts
new file mode 100644
index 00000000..47bb0212
--- /dev/null
+++ b/app/components/02.molecules/alert-content/stories/AlertContent.stories.ts
@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AlertContent from "../AlertContent.vue";
+
+const meta: Meta<typeof AlertContent> = {
+  title: "Molecules/AlertContent",
+  component: AlertContent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme — controls the accent colour and default icon",
+      table: { category: "Appearance" },
+    },
+    customIcon: {
+      control: "text",
+      description: "Iconify icon name to override the default theme icon",
+      table: { category: "Appearance" },
+    },
+    dismissible: {
+      control: "boolean",
+      description: "Show a close button (emits 'dismiss' on click)",
+      table: { category: "Behaviour" },
+    },
+    contentId: { table: { disable: true } },
+    ariaLive: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    dismissible: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertContent>;
+
+/** Default — info theme with title and body content. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Alert title</template>
+          <template #content>This is the alert body. It describes what happened and what the user should do next.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Dismissible — renders the close button and demonstrates the dismiss emit. */
+export const Dismissible: Story = {
+  args: { theme: "info", dismissible: true },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Dismissible alert</template>
+          <template #content>Click the close button to emit the dismiss event.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Title only — no body content slot. */
+export const TitleOnly: Story = {
+  name: "Title Only",
+  args: { theme: "success" },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Your changes have been saved.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** Custom icon — overrides the default theme icon via the customIcon prop. */
+export const CustomIcon: Story = {
+  name: "Custom Icon",
+  args: { theme: "info", customIcon: "akar-icons:star" },
+  render: (args) => ({
+    components: { AlertContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" style="max-width: 600px; padding: 2rem;">
+        <AlertContent v-bind="args">
+          <template #title>Custom icon via prop</template>
+          <template #content>The icon is overridden using the customIcon prop.</template>
+        </AlertContent>
+      </div>
+    `,
+  }),
+};
+
+/** All themes — all four semantic variants stacked. */
+export const AllThemes: Story = {
+  name: "All Themes",
+  render: () => ({
+    components: { AlertContent },
+    setup() {
+      return { themes: ["info", "success", "warning", "error"] as const };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.6rem; max-width: 600px; padding: 2rem;">
+        <div v-for="theme in themes" :key="theme" :data-theme="theme">
+          <AlertContent :theme="theme" :dismissible="true">
+            <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }}</template>
+            <template #content>This is the {{ theme }} variant of the AlertContent component.</template>
+          </AlertContent>
+        </div>
+      </div>
+    `,
+  }),
+};
diff --git a/app/components/02.molecules/alert-content/tests/AlertContent.spec.ts b/app/components/02.molecules/alert-content/tests/AlertContent.spec.ts
new file mode 100644
index 00000000..ddf93d6e
--- /dev/null
+++ b/app/components/02.molecules/alert-content/tests/AlertContent.spec.ts
@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertContent from "../AlertContent.vue";
+
+describe("AlertContent", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-content", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId ────────────────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", contentId: "toast-message-abc" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-abc");
+  });
+
+  it("omits id on the body element when contentId is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBeUndefined();
+  });
+
+  // ─── ariaLive ─────────────────────────────────────────────────────────────
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", ariaLive: "polite" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("polite");
+  });
+
+  it("omits aria-live when ariaLive is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBeUndefined();
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertContent, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  it("replaces the dismiss icon via the #dismissIcon slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissIcon: '<span class="custom-close">×</span>' },
+    });
+    expect(wrapper.find(".custom-close").exists()).toBe(true);
+  });
+
+  it("replaces the dismiss sr-only label via the #dismissLabel slot", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissLabel: "Close this prompt" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close this prompt");
+  });
+
+  it("uses 'Close' as the default dismiss label", async () => {
+    const wrapper = await mountSuspended(AlertContent, {
+      props: { theme: "info", dismissible: true },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close");
+  });
+});
diff --git a/app/components/02.molecules/alert-content/tests/AlertContentInner.spec.ts b/app/components/02.molecules/alert-content/tests/AlertContentInner.spec.ts
new file mode 100644
index 00000000..a40f5d64
--- /dev/null
+++ b/app/components/02.molecules/alert-content/tests/AlertContentInner.spec.ts
@@ -0,0 +1,135 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertContentInner from "../AlertContentInner.vue";
+
+describe("AlertContentInner", () => {
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-content-inner", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-inner").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(true);
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId ────────────────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", contentId: "toast-message-abc" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-abc");
+  });
+
+  it("omits id on the body element when contentId is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBeUndefined();
+  });
+
+  // ─── ariaLive ─────────────────────────────────────────────────────────────
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", ariaLive: "polite" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("polite");
+  });
+
+  it("omits aria-live when ariaLive is not provided", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBeUndefined();
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  it("replaces the dismiss icon via the #dismissIcon slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissIcon: '<span class="custom-close">×</span>' },
+    });
+    expect(wrapper.find(".custom-close").exists()).toBe(true);
+  });
+
+  it("replaces the dismiss sr-only label via the #dismissLabel slot", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+      slots: { dismissLabel: "Close this prompt" },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close this prompt");
+  });
+
+  it("uses 'Close' as the default dismiss label", async () => {
+    const wrapper = await mountSuspended(AlertContentInner, {
+      props: { theme: "info", dismissible: true },
+    });
+    expect(wrapper.find(".sr-only").text()).toBe("Close");
+  });
+});
diff --git a/app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue b/app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue
new file mode 100644
index 00000000..237b99c7
--- /dev/null
+++ b/app/components/02.molecules/alert-masked-content/AlertMaskedContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <div class="alert-masked-content" :data-theme="theme">
+    <AlertMaskCore :config="resolvedMaskConfig">
+      <AlertContentInner
+        :theme="theme"
+        :custom-icon="customIcon"
+        :dismissible="dismissible"
+        :content-id="contentId"
+        :aria-live="ariaLive"
+        @dismiss="emit('dismiss')"
+      >
+        <template v-if="slots.icon" #icon>
+          <slot name="icon"></slot>
+        </template>
+        <template v-if="slots.title" #title>
+          <slot name="title"></slot>
+        </template>
+        <template v-if="slots.content" #content>
+          <slot name="content"></slot>
+        </template>
+        <template v-if="slots.dismissIcon" #dismissIcon>
+          <slot name="dismissIcon"></slot>
+        </template>
+        <template v-if="slots.dismissLabel" #dismissLabel>
+          <slot name="dismissLabel"></slot>
+        </template>
+      </AlertContentInner>
+    </AlertMaskCore>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { SemanticTheme, AlertMaskConfig } from "~/types/components";
+
+interface Props {
+  theme: SemanticTheme;
+  customIcon?: string;
+  dismissible?: boolean;
+  contentId?: string;
+  ariaLive?: "polite" | "assertive" | "off";
+  maskConfig?: AlertMaskConfig;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  customIcon: undefined,
+  dismissible: false,
+  contentId: undefined,
+  ariaLive: undefined,
+  maskConfig: undefined,
+});
+
+const emit = defineEmits<{ dismiss: [] }>();
+
+const slots = useSlots();
+
+// Shape matches AlertContent: 8px left radius, 4px right, 6px accent bar on left, 1px border elsewhere
+const resolvedMaskConfig = computed<AlertMaskConfig>(() => ({
+  borderColour: "var(--theme-accent)",
+  backgroundColour: "rgba(0, 0, 0, 0.3)",
+  radiusLeft: 8,
+  radiusRight: 4,
+  borderLeft: 6,
+  borderTop: 1,
+  borderRight: 1,
+  borderBottom: 1,
+  ...props.maskConfig,
+}));
+</script>
+
+<style lang="css">
+@layer components {
+  .alert-masked-content {
+    .alert-content-inner {
+      --_alert-content-inner-bg: transparent;
+    }
+  }
+}
+</style>
diff --git a/app/components/02.molecules/alert-masked-content/stories/AlertMaskedContent.stories.ts b/app/components/02.molecules/alert-masked-content/stories/AlertMaskedContent.stories.ts
new file mode 100644
index 00000000..00701c8e
--- /dev/null
+++ b/app/components/02.molecules/alert-masked-content/stories/AlertMaskedContent.stories.ts
@@ -0,0 +1,132 @@
+import type { Meta, StoryObj } from "@nuxtjs/storybook";
+import AlertMaskedContent from "../AlertMaskedContent.vue";
+
+const meta: Meta<typeof AlertMaskedContent> = {
+  title: "Molecules/AlertMaskedContent",
+  component: AlertMaskedContent,
+  argTypes: {
+    theme: {
+      control: { type: "inline-radio" },
+      options: ["info", "success", "warning", "error"],
+      description: "Semantic theme — controls the accent colour and default icon",
+      table: { category: "Appearance" },
+    },
+    customIcon: {
+      control: "text",
+      description: "Iconify icon name to override the default theme icon",
+      table: { category: "Appearance" },
+    },
+    dismissible: {
+      control: "boolean",
+      description: "Show a close button (emits 'dismiss' on click)",
+      table: { category: "Behaviour" },
+    },
+    maskConfig: { table: { disable: true } },
+    contentId: { table: { disable: true } },
+    ariaLive: { table: { disable: true } },
+  },
+  args: {
+    theme: "info",
+    dismissible: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AlertMaskedContent>;
+
+const wrapperStyle = `
+  max-width: 600px;
+  padding: 2rem;
+  background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300));
+  border-radius: 8px;
+`;
+
+/** Default — info theme over a coloured background to show the glass effect. */
+export const Default: Story = {
+  render: (args) => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" :style="'${wrapperStyle}'">
+        <AlertMaskedContent v-bind="args">
+          <template #title>Alert title</template>
+          <template #content>This is the alert body. It describes what happened and what the user should do next.</template>
+        </AlertMaskedContent>
+      </div>
+    `,
+  }),
+};
+
+/** Dismissible — renders the close button. */
+export const Dismissible: Story = {
+  args: { theme: "info", dismissible: true },
+  render: (args) => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div :data-theme="args.theme" :style="'${wrapperStyle}'">
+        <AlertMaskedContent v-bind="args">
+          <template #title>Dismissible alert</template>
+          <template #content>Click the close button to emit the dismiss event.</template>
+        </AlertMaskedContent>
+      </div>
+    `,
+  }),
+};
+
+/** All themes — all four semantic variants stacked over a shared background. */
+export const AllThemes: Story = {
+  name: "All Themes",
+  render: () => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return { themes: ["info", "success", "warning", "error"] as const };
+    },
+    template: `
+      <div style="${wrapperStyle} display: flex; flex-direction: column; gap: 1.2rem;">
+        <div v-for="theme in themes" :key="theme" :data-theme="theme">
+          <AlertMaskedContent :theme="theme" :dismissible="true">
+            <template #title>{{ theme.charAt(0).toUpperCase() + theme.slice(1) }}</template>
+            <template #content>This is the {{ theme }} masked variant.</template>
+          </AlertMaskedContent>
+        </div>
+      </div>
+    `,
+  }),
+};
+
+/** Compared side-by-side with different background colours to show how the glass adapts. */
+export const BackgroundVariants: Story = {
+  name: "Background Variants",
+  render: () => ({
+    components: { AlertMaskedContent },
+    setup() {
+      return {
+        backgrounds: [
+          "linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300))",
+          "linear-gradient(135deg, oklch(35% 0.12 30), oklch(20% 0.08 60))",
+          "linear-gradient(135deg, oklch(20% 0 0), oklch(10% 0 0))",
+        ],
+      };
+    },
+    template: `
+      <div style="display: flex; flex-direction: column; gap: 1.6rem;">
+        <div
+          v-for="(bg, i) in backgrounds"
+          :key="i"
+          :style="{ background: bg, padding: '2rem', borderRadius: '8px', maxWidth: '500px' }"
+          data-theme="info"
+        >
+          <AlertMaskedContent theme="info" :dismissible="true">
+            <template #title>Glass effect</template>
+            <template #content>The masked border adapts to whatever sits behind it.</template>
+          </AlertMaskedContent>
+        </div>
+      </div>
+    `,
+  }),
+};
diff --git a/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts b/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts
new file mode 100644
index 00000000..f67c67a8
--- /dev/null
+++ b/app/components/02.molecules/alert-masked-content/tests/AlertMaskedContent.spec.ts
@@ -0,0 +1,149 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import AlertMaskedContent from "../AlertMaskedContent.vue";
+
+const mockResizeObserver = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}));
+
+vi.stubGlobal("ResizeObserver", mockResizeObserver);
+
+describe("AlertMaskedContent", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  // ─── Mount ────────────────────────────────────────────────────────────────
+
+  it("mounts without error", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.vm).toBeTruthy();
+  });
+
+  // ─── Root element ─────────────────────────────────────────────────────────
+
+  it("renders the root element with class alert-masked-content", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-masked-content").exists()).toBe(true);
+  });
+
+  it("sets data-theme on the root element", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "success" } });
+    expect(wrapper.find(".alert-masked-content").attributes("data-theme")).toBe("success");
+  });
+
+  // ─── AlertMaskCore ────────────────────────────────────────────────────────
+
+  it("renders AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-mask-core").exists()).toBe(true);
+  });
+
+  it("renders AlertContentInner inside AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find(".alert-mask-core .alert-content-inner").exists()).toBe(true);
+  });
+
+  // ─── Icon ─────────────────────────────────────────────────────────────────
+
+  it("renders the icon region", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-icon']").exists()).toBe(true);
+  });
+
+  it("replaces the icon via the #icon slot", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { icon: '<span class="custom-icon">★</span>' },
+    });
+    expect(wrapper.find(".custom-icon").exists()).toBe(true);
+  });
+
+  // ─── Title slot ───────────────────────────────────────────────────────────
+
+  it("renders the title element when the #title slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { title: "Important notice" },
+    });
+    expect(wrapper.find("[data-test-id='alert-title']").text()).toContain("Important notice");
+  });
+
+  it("does not render the title element when the #title slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-title']").exists()).toBe(false);
+  });
+
+  // ─── Content slot ─────────────────────────────────────────────────────────
+
+  it("renders the content element when the #content slot is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info" },
+      slots: { content: "More detail here." },
+    });
+    expect(wrapper.find("[data-test-id='alert-content']").text()).toContain("More detail here.");
+  });
+
+  it("does not render the content element when the #content slot is not provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    expect(wrapper.find("[data-test-id='alert-content']").exists()).toBe(false);
+  });
+
+  // ─── contentId / ariaLive ─────────────────────────────────────────────────
+
+  it("sets id on the body element when contentId is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", contentId: "toast-message-xyz" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("id")).toBe("toast-message-xyz");
+  });
+
+  it("sets aria-live on the body element when ariaLive is provided", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", ariaLive: "assertive" },
+    });
+    expect(wrapper.find(".alert-content-body").attributes("aria-live")).toBe("assertive");
+  });
+
+  // ─── Dismiss button ───────────────────────────────────────────────────────
+
+  it("does not render the dismiss button when dismissible is false", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: false } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(false);
+  });
+
+  it("renders the dismiss button when dismissible is true", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: true } });
+    expect(wrapper.find("[data-test-id='alert-dismiss']").exists()).toBe(true);
+  });
+
+  it("emits the dismiss event when the dismiss button is clicked", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info", dismissible: true } });
+    await wrapper.find("[data-test-id='alert-dismiss']").trigger("click");
+    expect(wrapper.emitted("dismiss")).toBeTruthy();
+  });
+
+  // ─── Default maskConfig ───────────────────────────────────────────────────
+
+  it("passes the resolved maskConfig to AlertMaskCore", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, { props: { theme: "info" } });
+    const contentEl = wrapper.find(".alert-mask-content");
+    const style = (contentEl.element as HTMLElement).style;
+    // Default borderLeft: 6 → --insetInlineStart: 6px
+    expect(style.getPropertyValue("--insetInlineStart")).toBe("6px");
+    expect(style.getPropertyValue("--insetBlockStart")).toBe("1px");
+    expect(style.getPropertyValue("--insetInlineEnd")).toBe("1px");
+    expect(style.getPropertyValue("--insetBlockEnd")).toBe("1px");
+  });
+
+  it("merges custom maskConfig over defaults", async () => {
+    const wrapper = await mountSuspended(AlertMaskedContent, {
+      props: { theme: "info", maskConfig: { borderLeft: 12 } },
+    });
+    const contentEl = wrapper.find(".alert-mask-content");
+    const style = (contentEl.element as HTMLElement).style;
+    expect(style.getPropertyValue("--insetInlineStart")).toBe("12px");
+  });
+});
diff --git a/app/components/05.forms/input-button/InputButtonCore.vue b/app/components/05.forms/input-button/InputButtonCore.vue
index 7bb1e34c..0762ac24 100644
--- a/app/components/05.forms/input-button/InputButtonCore.vue
+++ b/app/components/05.forms/input-button/InputButtonCore.vue
@@ -10,7 +10,7 @@
     class="input-button-core"
     :class="buttonClasses"
   >
-    <PendingEffect v-if="hasPendingEffect" />
+    <PendingEffect v-if="hasPendingEffect" :theme="theme" />
 
     <span v-if="hasLeftSlot" class="btn-icon left">
       <slot name="left"></slot>
@@ -87,7 +87,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 <style lang="css">
 @layer components {
   .input-button-core {
-    all: unset;
+    /* all: unset; */
 
     display: grid;
     grid-auto-flow: column;
@@ -108,53 +108,52 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
 
     /*
-  * Variants
-  **/
-    &.primary {
-      background-color: var(--theme-surface);
-      color: var(--theme-on-surface);
-      border: var(--button-border-width) solid var(--theme-surface);
-      outline: var(--button-outline-width) solid var(--theme-ring);
-
-      &:hover,
-      &:focus-visible {
-        background-color: transparent;
-        color: var(--theme-text);
-        border-color: var(--theme-surface);
-        outline-color: var(--theme-surface);
-      }
+    * Theming
+    **/
+    background-color: var(--theme-surface);
+    color: var(--theme-on-surface);
+    border: var(--button-border-width) solid var(--theme-border);
+    outline: var(--button-outline-width) solid var(--theme-ring);
+
+    &:hover,
+    &:focus-visible {
+      background-color: var(--theme-surface-hover);
+      color: var(--theme-text);
+      border-color: var(--theme-border-focus);
+      outline-color: var(--theme-ring);
+    }
 
-      &.is-pending {
-        background-color: color-mix(in oklab, var(--theme-surface) 50%, transparent);
-      }
+    &.is-pending {
+      background-color: color-mix(in oklab, var(--theme-surface) 50%, transparent);
     }
 
     &.secondary {
-      background-color: transparent;
-      border: var(--button-border-width) solid var(--theme-surface);
-      color: var(--theme-text);
+      background-color: var(--theme-surface-inverted);
+      border: var(--button-border-width) solid var(--theme-border);
+      color: var(--theme-text-inverted);
       outline: var(--button-outline-width) solid var(--theme-ring);
 
       &:hover,
       &:focus-visible {
         background-color: var(--theme-surface);
         color: var(--theme-on-surface);
-        border-color: var(--theme-surface);
+        border-color: var(--theme-border-focus);
         outline-color: var(--theme-surface);
       }
     }
 
     &.tertiary {
       background-color: light-dark(var(--slate-01), transparent);
-      border: var(--button-border-width) solid transparent;
+      border: var(--button-border-width) solid var(--theme-border);
       color: var(--theme-text);
       text-decoration: underline;
-      outline: var(--button-outline-width) solid transparent;
+      outline: var(--button-outline-width) solid var(--theme-border-focus);
 
       &:hover,
       &:focus-visible {
-        border-color: var(--theme-surface);
-        outline-color: var(--theme-surface);
+        background-color: var(--theme-surface-hover);
+        border-color: var(--theme-border-focus);
+        outline-color: var(--theme-border-focus);
       }
     }
 
@@ -180,11 +179,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
     &[readonly] {
       opacity: 0.5;
-      &:hover,
-      &:focus-visible {
-        cursor: not-allowed;
-        pointer-events: none;
-      }
+      cursor: not-allowed;
+      pointer-events: none;
     }
 
     .button-text {
diff --git a/app/components/05.forms/pending-effect/PendingEffect.vue b/app/components/05.forms/pending-effect/PendingEffect.vue
index fc608603..aa932c7e 100644
--- a/app/components/05.forms/pending-effect/PendingEffect.vue
+++ b/app/components/05.forms/pending-effect/PendingEffect.vue
@@ -21,81 +21,81 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 @layer components {
-.pending-effect {
-  --pending-line-color: var(--theme-surface);
-  --pending-line-thickness: 0.1rem;
-  --pending-line-length: 2rem;
-  --pending-blur-color: var(--theme-surface);
-  --pending-blur-size: 0rem; /* 0.3rem */
-  --pending-offset: 1rem;
-  --animation-speed: 3000ms;
-  /* do not change, used for calculations */
-  --container-offset: 10rem;
-  position: relative;
+  .pending-effect {
+    --pending-line-color: var(--theme-surface);
+    --pending-line-thickness: 0.1rem;
+    --pending-line-length: 2rem;
+    --pending-blur-color: var(--theme-surface);
+    --pending-blur-size: 0rem; /* 0.3rem */
+    --pending-offset: 1rem;
+    --animation-speed: 3000ms;
+    /* do not change, used for calculations */
+    --container-offset: 10rem;
+    position: relative;
 
-  .pending-container {
-    pointer-events: none;
-    position: absolute;
-    inset: calc(var(--container-offset) / -2);
-    width: calc(100% + var(--container-offset));
-    height: calc(100% + var(--container-offset));
-    opacity: 0;
+    .pending-container {
+      pointer-events: none;
+      position: absolute;
+      inset: calc(var(--container-offset) / -2);
+      width: calc(100% + var(--container-offset));
+      height: calc(100% + var(--container-offset));
+      opacity: 0;
 
-    .pending-blur,
-    .pending-line {
-      width: calc(100% - var(--container-offset) + var(--pending-offset));
-      height: calc(100% - var(--container-offset) + var(--pending-offset));
-      x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-      y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
-      rx: 0.8rem;
-      fill: transparent;
-      stroke: black;
-      stroke-width: 0.5rem;
-      stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
-    }
+      .pending-blur,
+      .pending-line {
+        width: calc(100% - var(--container-offset) + var(--pending-offset));
+        height: calc(100% - var(--container-offset) + var(--pending-offset));
+        x: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+        y: calc((var(--container-offset) / 2) + calc(var(--pending-offset) / -2));
+        rx: 0.8rem;
+        fill: transparent;
+        stroke: black;
+        stroke-width: 0.5rem;
+        stroke-dasharray: var(--pending-line-length) calc(5rem - var(--pending-line-length));
+      }
 
-    .pending-line {
-      stroke: var(--pending-line-color);
-      stroke-width: var(--pending-line-thickness);
-    }
+      .pending-line {
+        stroke: var(--pending-line-color);
+        stroke-width: var(--pending-line-thickness);
+      }
 
-    .pending-blur {
-      filter: blur(var(--pending-blur-size));
-      stroke: var(--pending-blur-color);
-      stroke-width: var(--pending-blur-size);
+      .pending-blur {
+        filter: blur(var(--pending-blur-size));
+        stroke: var(--pending-blur-color);
+        stroke-width: var(--pending-blur-size);
+      }
     }
-  }
 
-  &:is(.icon-only) {
-    .pending-container {
-      .pending-blur,
-      .pending-line {
-        rx: 100vw;
+    &:is(.icon-only) {
+      .pending-container {
+        .pending-blur,
+        .pending-line {
+          rx: 100vw;
+        }
       }
     }
-  }
 
-  &:is(.is-pending) {
-    pointer-events: none;
-    cursor: wait;
+    &:is(.is-pending) {
+      pointer-events: none;
+      cursor: wait;
 
-    @media (prefers-reduced-motion: no-preference) {
-      animation: stroke-dashoffset var(--animation-speed) infinite linear;
+      @media (prefers-reduced-motion: no-preference) {
+        animation: stroke-dashoffset var(--animation-speed) infinite linear;
 
-      .pending-container {
-        opacity: 1;
+        .pending-container {
+          opacity: 1;
+        }
       }
     }
   }
-}
 
-@keyframes stroke-dashoffset {
-  0% {
-    stroke-dashoffset: 0;
-  }
-  100% {
-    stroke-dashoffset: -10rem;
+  @keyframes stroke-dashoffset {
+    0% {
+      stroke-dashoffset: 0;
+    }
+    100% {
+      stroke-dashoffset: -10rem;
+    }
   }
 }
-}
 </style>
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 8dd10893..7f853fd6 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -79,12 +79,12 @@ const responsiveNavLinks = {
         { name: "Card Core", path: "/ui/card-core" },
         { name: "Glowing Border", path: "/ui/glowing-border" },
         { name: "Display Toast", path: "/ui/display-toast" },
+        { name: "Prompts", path: "/ui/display-prompt" },
         { name: "Masked Alert", path: "/ui/mask-element" },
         { name: "Expanding Panel", path: "/ui/expanding-panel" },
         { name: "Dialogs", path: "/ui/display-dialog" },
         { name: "Tabs X", path: "/ui/tabs" },
         { name: "Tabs Y", path: "/ui/tabs-y" },
-        { name: "Prompts", path: "/ui/display-prompt" },
         { name: "Rotating Carousel", path: "/ui/rotating-carousel" },
         { name: "Clipped Panels", path: "/ui/clipped-panels" },
         { name: "Display Chip", path: "/ui/display-chip" },
diff --git a/app/pages/ui/display-prompt.vue b/app/pages/ui/display-prompt.vue
index 0e5a9f92..86071b05 100644
--- a/app/pages/ui/display-prompt.vue
+++ b/app/pages/ui/display-prompt.vue
@@ -2,49 +2,130 @@
   <div>
     <NuxtLayout name="default">
       <template #layout-content>
-        <PageRow tag="div" variant="popout" style-class-passthrough="['pb-12']">
+        <PageRow tag="div" variant="content" :style-class-passthrough="['pb-12']">
           <h1 class="page-heading-2">Display Prompts</h1>
 
+          <div v-if="isDev" class="qa-panel">
+            <details class="qa-panel__details">
+              <summary class="qa-panel__summary">
+                <span class="qa-panel__title">QA — DisplayPrompt</span>
+                <code class="qa-panel__status">
+                  {{ qaTheme }} · {{ qaDismissible ? "dismissible" : "static" }} ·
+                  {{ qaOutlined ? "outlined" : "no-outline" }} · {{ qaHighContrast ? "high-contrast" : "standard" }} ·
+                  {{ qaMasked ? "masked" : "unmasked" }}
+                </code>
+              </summary>
+              <div class="qa-panel__body">
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Theme</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in themes"
+                      :key="opt"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaTheme === opt }"
+                      @click="qaTheme = opt"
+                    >
+                      {{ opt }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Dismissible</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaDismissible === opt }"
+                      @click="qaDismissible = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Outlined</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaOutlined === opt }"
+                      @click="qaOutlined = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">High Contrast</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaHighContrast === opt }"
+                      @click="qaHighContrast = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Auto Focus</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaAutoFocus === opt }"
+                      @click="qaAutoFocus = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Masked</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaMasked === opt }"
+                      @click="qaMasked = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </details>
+          </div>
+
           <section class="prompt-examples pb-12">
-            <DisplayPrompt
-              theme="success"
-              :dismissible="true"
-              :style-class-passthrough="['your-scope-class', 'outlined', 'dark']"
-            >
-              <template #customDecoratorIcon>
-                <Icon name="akar-icons:info" class="icon" />
-              </template>
-              <template #title>Success Prompt Title with content (Dismissable)</template>
-              <template #content>This is prompt content, it can contain html or plain text.</template>
-              <template #customCloseIcon>
-                <Icon name="material-symbols:close-small" class="icon" />
-              </template>
-              <template #customTitle>Dismiss</template>
-            </DisplayPrompt>
-
-            <DisplayPrompt theme="info" :dismissible="true" :style-class-passthrough="['your-scope-class']">
-              <template #customDecoratorIcon>
-                <Icon name="akar-icons:info" class="icon" />
-              </template>
-              <template #title>Info Prompt Title with content (Dismissable)</template>
-              <template #content>This is prompt content, it can contain html or plain text.</template>
-            </DisplayPrompt>
-
-            <DisplayPrompt theme="error" :dismissible="true" :style-class-passthrough="['your-scope-class']">
-              <template #customDecoratorIcon>
-                <Icon name="akar-icons:circle-alert" class="icon" />
-              </template>
-              <template #title>Error Prompt Title with content (Dismissable)</template>
-              <template #content>This is prompt content, it can contain html or plain text.</template>
-            </DisplayPrompt>
-
-            <DisplayPrompt theme="warning" :dismissible="true" :style-class-passthrough="['your-scope-class']">
-              <template #customDecoratorIcon>
-                <Icon name="akar-icons:circle-alert" class="icon" />
-              </template>
-              <template #title>Warning Prompt Title with content (Dismissable)</template>
-              <template #content>This is prompt content, it can contain html or plain text.</template>
-            </DisplayPrompt>
+            <div :class="{ 'masked-bg': qaMasked }">
+              <DisplayPrompt
+                :key="promptKey"
+                :theme="qaTheme"
+                :dismissible="qaDismissible"
+                :use-auto-focus="qaAutoFocus"
+                :masked="qaMasked"
+                :style-class-passthrough="styleClasses"
+              >
+                <template #customDecoratorIcon>
+                  <Icon :name="themeIcons[qaTheme]" class="icon" />
+                </template>
+                <template #title>{{ themeLabels[qaTheme] }} Prompt Title</template>
+                <template #content>This is prompt content, it can contain html or plain text.</template>
+              </DisplayPrompt>
+            </div>
           </section>
         </PageRow>
       </template>
@@ -53,14 +134,49 @@
 </template>
 
 <script setup lang="ts">
-definePageMeta({
-  layout: false,
-});
+import type { DisplayPromptTheme } from "~/types/components";
+
+definePageMeta({ layout: false });
 
 useHead({
   title: "UI Display Prompts",
   meta: [{ name: "description", content: "Examples of UI Display Prompts" }],
+  bodyAttrs: { class: "displayPrompt-page" },
 });
+
+const isDev = import.meta.dev;
+
+const themes = ["info", "success", "warning", "error"] as const;
+
+const qaTheme = ref<DisplayPromptTheme>("info");
+const qaDismissible = ref(true);
+const qaOutlined = ref(false);
+const qaHighContrast = ref(false);
+const qaAutoFocus = ref(false);
+const qaMasked = ref(false);
+
+const themeIcons: Record<DisplayPromptTheme, string> = {
+  info: "akar-icons:info",
+  success: "akar-icons:check",
+  warning: "akar-icons:circle-alert",
+  error: "akar-icons:circle-alert",
+};
+
+const themeLabels: Record<DisplayPromptTheme, string> = {
+  info: "Info",
+  success: "Success",
+  warning: "Warning",
+  error: "Error",
+};
+
+const styleClasses = computed(() => {
+  const classes: string[] = [];
+  if (qaOutlined.value) classes.push("outlined");
+  if (qaHighContrast.value) classes.push("high-contrast");
+  return classes;
+});
+
+const promptKey = computed(() => `${qaTheme.value}-${qaDismissible.value}-${qaMasked.value}`);
 </script>
 
 <style lang="css">
@@ -68,5 +184,101 @@ useHead({
   display: flex;
   flex-direction: column;
   gap: 1rem;
+
+  .masked-bg {
+    padding: 2rem;
+    border-radius: 0.8rem;
+    background: linear-gradient(135deg, oklch(40% 0.15 250), oklch(25% 0.1 300));
+  }
+}
+
+.displayPrompt-page {
+  .qa-panel {
+    background: oklch(15% 0 0);
+    color: white;
+    font-size: 1.3rem;
+    margin-block: 1.2rem;
+  }
+
+  .qa-panel__details {
+    padding: 1rem 2rem;
+  }
+
+  .qa-panel__summary {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1.6rem;
+    list-style: none;
+    user-select: none;
+
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+
+  .qa-panel__title {
+    font-weight: 600;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+  }
+
+  .qa-panel__status {
+    font-family: monospace;
+    font-size: 1.2rem;
+    background: oklch(0% 0 0 / 0.3);
+    padding: 0.2rem 0.8rem;
+    border-radius: 0.4rem;
+    user-select: text;
+    cursor: text;
+  }
+
+  .qa-panel__body {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 2.4rem;
+    padding-block: 1.2rem 0.4rem;
+  }
+
+  .qa-panel__group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+  }
+
+  .qa-panel__label {
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    opacity: 0.55;
+  }
+
+  .qa-panel__chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+  }
+
+  .qa-panel__chip {
+    font-family: monospace;
+    font-size: 1.2rem;
+    color: white;
+    background: oklch(0% 0 0 / 0.25);
+    border: 1px solid oklch(100% 0 0 / 0.18);
+    padding: 0.3rem 1rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    transition: background 0.15s;
+
+    &:hover {
+      background: oklch(0% 0 0 / 0.4);
+    }
+
+    &.is-active {
+      background: oklch(55% 0.18 240);
+      border-color: oklch(55% 0.18 240);
+    }
+  }
 }
 </style>
diff --git a/app/pages/ui/display-toast.vue b/app/pages/ui/display-toast.vue
index cc3f5857..b8223e2b 100644
--- a/app/pages/ui/display-toast.vue
+++ b/app/pages/ui/display-toast.vue
@@ -3,7 +3,7 @@
     <NuxtLayout name="default">
       <template #layout-content>
         <PageRow tag="div" variant="content" :style-class-passthrough="['mbe-20', 'p-20']">
-          <h2 class="page-heading-2">DisplayToast / DisplayToastProvider</h2>
+          <h2 class="page-heading-2">DisplayToast Masked / DisplayToastProvider</h2>
 
           <div v-if="isDev" class="qa-panel">
             <details class="qa-panel__details">
@@ -11,7 +11,8 @@
                 <span class="qa-panel__title">QA — DisplayToastProvider</span>
                 <code class="qa-panel__status">
                   {{ qaTheme }} · {{ qaPosition }}-{{ qaAlignment }} ·
-                  {{ qaAutoDismiss ? `auto ${qaDuration}ms` : "manual" }} · max:{{ qaMaxVisible }}
+                  {{ qaAutoDismiss ? `auto ${qaDuration}ms` : "manual" }} · max:{{ qaMaxVisible }} ·
+                  {{ qaIsMasked ? "masked" : "solid" }}
                 </code>
               </summary>
               <div class="qa-panel__body">
@@ -60,6 +61,21 @@
                   </div>
                 </div>
 
+                <div class="qa-panel__group">
+                  <span class="qa-panel__label">Masked</span>
+                  <div class="qa-panel__chips">
+                    <button
+                      v-for="opt in [true, false]"
+                      :key="String(opt)"
+                      class="qa-panel__chip"
+                      :class="{ 'is-active': qaIsMasked === opt }"
+                      @click="qaIsMasked = opt"
+                    >
+                      {{ opt ? "yes" : "no" }}
+                    </button>
+                  </div>
+                </div>
+
                 <div class="qa-panel__group">
                   <span class="qa-panel__label">Full Width</span>
                   <div class="qa-panel__chips">
@@ -109,7 +125,7 @@
                   <span class="qa-panel__label">Max Visible</span>
                   <div class="qa-panel__chips">
                     <button
-                      v-for="opt in [1, 2, 3]"
+                      v-for="opt in [1, 2, 3, 4, 5]"
                       :key="opt"
                       class="qa-panel__chip"
                       :class="{ 'is-active': qaMaxVisible === opt }"
@@ -148,8 +164,8 @@ import type { DisplayToastTheme, DisplayToastPosition, DisplayToastAlignment } f
 definePageMeta({ layout: false });
 
 useHead({
-  title: "DisplayToast",
-  meta: [{ name: "description", content: "DisplayToast component demo" }],
+  title: "DisplayToast Masked / DisplayToastProvider",
+  meta: [{ name: "description", content: "DisplayToast Masked component demo" }],
   bodyAttrs: { class: "displayToast-page" },
 });
 
@@ -164,6 +180,7 @@ const durations = [2000, 3000, 5000, 8000] as const;
 const qaTheme = ref<DisplayToastTheme>("info");
 const qaPosition = ref<DisplayToastPosition>("top");
 const qaAlignment = ref<DisplayToastAlignment>("right");
+const qaIsMasked = ref(true);
 const qaFullWidth = ref(false);
 const qaAutoDismiss = ref(true);
 const qaDuration = ref(5000);
@@ -178,7 +195,7 @@ const messages: Record<DisplayToastTheme, { title: string; description: string }
 
 const triggerToast = () => {
   show({
-    appearance: { theme: qaTheme.value },
+    appearance: { theme: qaTheme.value, masked: qaIsMasked.value },
     behavior: { autoDismiss: qaAutoDismiss.value, duration: qaDuration.value },
     content: messages[qaTheme.value],
   });
@@ -187,7 +204,7 @@ const triggerToast = () => {
 const queueMultiple = () => {
   themes.forEach((theme) => {
     show({
-      appearance: { theme },
+      appearance: { theme, masked: qaIsMasked.value },
       behavior: { autoDismiss: qaAutoDismiss.value, duration: qaDuration.value },
       content: messages[theme],
     });
@@ -274,19 +291,19 @@ const queueMultiple = () => {
     font-family: monospace;
     font-size: 1.2rem;
     color: white;
-    background: oklch(0% 0 0 / 0.25);
+    background-color: oklch(0% 0 0 / 0.25);
     border: 1px solid oklch(100% 0 0 / 0.18);
     padding: 0.3rem 1rem;
     border-radius: 0.4rem;
     cursor: pointer;
-    transition: background 0.15s;
+    transition: background-color 0.15s;
 
     &:hover {
-      background: oklch(0% 0 0 / 0.4);
+      background-color: oklch(0% 0 0 / 0.4);
     }
 
     &.is-active {
-      background: oklch(55% 0.18 240);
+      background-color: oklch(55% 0.18 240);
       border-color: oklch(55% 0.18 240);
     }
   }
diff --git a/app/types/components/display-prompt.d.ts b/app/types/components/display-prompt.d.ts
index 86cadf88..3a229c5a 100644
--- a/app/types/components/display-prompt.d.ts
+++ b/app/types/components/display-prompt.d.ts
@@ -6,5 +6,6 @@ export interface DisplayPromptProps {
   theme?: DisplayPromptTheme
   dismissible?: boolean
   useAutoFocus?: boolean
+  masked?: boolean
   styleClassPassthrough?: string | string[]
 }
diff --git a/app/types/components/display-toast.d.ts b/app/types/components/display-toast.d.ts
index f79dec24..c23640b7 100644
--- a/app/types/components/display-toast.d.ts
+++ b/app/types/components/display-toast.d.ts
@@ -11,6 +11,7 @@ export interface DisplayToastAppearanceConfig {
   position?: DisplayToastPosition
   alignment?: DisplayToastAlignment
   fullWidth?: boolean
+  masked?: boolean
 }
 
 export interface DisplayToastBehaviorConfig {