@dxlbnl/ui 0.1.0 → 1.0.0

package/README.md

@@ -82,7 +82,7 @@ Both palettes use the same CSS custom property names (`--ink`, `--bg`, `--amber`
 <ToastRegion />
 
 <!-- Push a notification from anywhere -->
-<button onclick={() => toast.push('Saved', { variant: 'ok' })}>Save</button>
+<button onclick={() => toast.push('Saved', { title: 'Done', variant: 'success' })}>Save</button>
 ```
 
 ## Storybook

package/dist/components/cards/NoteCard.svelte

@@ -41,7 +41,7 @@
         <Text variant="mono" color="faint" size="xs">{hexId}</Text>
         <Text variant="mono" color="cyan" size="xs">{kind.toUpperCase()}</Text>
       </Spread>
-      <Heading level={3} size="lg">{title}</Heading>
+      <Heading level={3}>{title}</Heading>
       {#if lede}
         <Text variant="body" class="note-lede">{lede}</Text>
       {/if}

package/dist/components/cards/ProductCard.svelte

@@ -70,7 +70,7 @@
   <div class="card-body">
     <Stack gap="xs">
       <Text variant="eyebrow">{sku}</Text>
-      <Heading level={3} size="lg">{name}</Heading>
+      <Heading level={3}>{name}</Heading>
       <Text variant="mono" case="none" color="dim" class="card-desc">{description}</Text>
       <div class="card-footer-row">
         <Spread>

package/dist/components/cards/ProjectCard.svelte

@@ -49,7 +49,7 @@
           {/each}
         </Inline>
       {/if}
-      <Heading level={3} size="lg">{title}</Heading>
+      <Heading level={3}>{title}</Heading>
       <p class="card-desc">{description}</p>
     </Stack>
   </div>

package/dist/components/feedback/Alert.stories.svelte

@@ -0,0 +1,131 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Alert from "./Alert.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Feedback/Alert",
+    component: Alert,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC-5: success variant — borderLeftColor matches --ok token -->
+<Story
+  name="Ok"
+  args={{ variant: "success", title: "Build successful", message: "All rails nominal." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-9: root element has NO role attribute
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    await expect(alertEl!.getAttribute("role")).toBeNull();
+
+    // title and message visible
+    await expect(canvas.getByText("Build successful")).toBeVisible();
+    await expect(canvas.getByText("All rails nominal.")).toBeVisible();
+
+    // .alert-tag glyph present with aria-hidden
+    const tag = canvas.getByText("ok");
+    await expect(tag).toHaveAttribute("aria-hidden", "true");
+
+    // AC-5: borderLeftColor matches --ok
+    const okColor = resolveTokenFgColor("--ok");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(okColor);
+  }}
+/>
+
+<!-- AC-6: warning variant — borderLeftColor matches --amber token -->
+<Story
+  name="Amber"
+  args={{ variant: "warning", title: "High load", message: "+12V rail at 88%." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-9: no role attribute
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    await expect(alertEl!.getAttribute("role")).toBeNull();
+
+    await expect(canvas.getByText("High load")).toBeVisible();
+
+    // .alert-tag glyph for warning
+    const tag = canvas.getByText("!!");
+    await expect(tag).toHaveAttribute("aria-hidden", "true");
+
+    // AC-6: borderLeftColor matches --amber
+    const amberColor = resolveTokenFgColor("--amber");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(amberColor);
+  }}
+/>
+
+<!-- AC-7: error variant — borderLeftColor matches --danger token -->
+<Story
+  name="Danger"
+  args={{ variant: "error", title: "Thermal fault", message: "Over-temperature protection triggered." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-9: no role attribute
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    await expect(alertEl!.getAttribute("role")).toBeNull();
+
+    await expect(canvas.getByText("Thermal fault")).toBeVisible();
+
+    // .alert-tag glyph for error
+    const tag = canvas.getByText("err");
+    await expect(tag).toHaveAttribute("aria-hidden", "true");
+
+    // AC-7: borderLeftColor matches --danger
+    const dangerColor = resolveTokenFgColor("--danger");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(dangerColor);
+  }}
+/>
+
+<!-- AC-8: info variant — borderLeftColor matches --cyan token -->
+<Story
+  name="Info"
+  args={{ variant: "info", title: "Firmware update available", message: "v2.1.0 → v2.2.0." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-9: no role attribute
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+    await expect(alertEl!.getAttribute("role")).toBeNull();
+
+    await expect(canvas.getByText("Firmware update available")).toBeVisible();
+
+    // .alert-tag glyph for info
+    const tag = canvas.getByText("inf");
+    await expect(tag).toHaveAttribute("aria-hidden", "true");
+
+    // AC-8: borderLeftColor matches --cyan
+    const cyanColor = resolveTokenFgColor("--cyan");
+    await expect(getComputedStyle(alertEl!).borderLeftColor).toBe(cyanColor);
+  }}
+/>
+
+<!-- AC-11: when title is absent/empty, .alert-title is not visible -->
+<Story
+  name="No Title"
+  args={{ variant: "success", message: "Status OK — no title provided." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const alertEl = canvasElement.querySelector(".alert");
+    await expect(alertEl).not.toBeNull();
+
+    // AC-11: no .alert-title text visible when title is absent
+    const titleEl = canvasElement.querySelector(".alert-title");
+    // Either the element is absent, or it has no visible text
+    if (titleEl) {
+      await expect(titleEl.textContent?.trim()).toBeFalsy();
+    }
+
+    await expect(canvas.getByText("Status OK — no title provided.")).toBeVisible();
+  }}
+/>

package/dist/components/feedback/Alert.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+  import Stack from '../layout/Stack.svelte'
+
+  type AlertVariant = 'success' | 'warning' | 'error' | 'info'
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Colour variant — drives the tag glyph and border accent. @default 'info' */
+    variant?: AlertVariant
+    /** Bold title text shown in the alert header. */
+    title?: string
+    /** Body message text. */
+    message?: string
+    /** When provided, renders a dismiss × button inside the alert. */
+    ondismiss?: () => void
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    variant = 'info',
+    title,
+    message,
+    ondismiss,
+    children,
+    ...rest
+  }: Props = $props()
+
+  const TAG_GLYPHS: Record<AlertVariant, string> = {
+    success: 'ok',
+    warning: '!!',
+    error: 'err',
+    info: 'inf',
+  }
+</script>
+
+<div class="alert alert--{variant}" {...rest}>
+  <span class="alert-tag" aria-hidden="true">{TAG_GLYPHS[variant]}</span>
+  <Stack gap="sm">
+    {#if title}
+      <span class="alert-title">{title}</span>
+    {/if}
+    {#if message}
+      <span class="alert-msg">{message}</span>
+    {/if}
+    {@render children?.()}
+  </Stack>
+  {#if ondismiss}
+    <button class="alert-dismiss" type="button" aria-label="Dismiss notification" onclick={ondismiss}>×</button>
+  {/if}
+</div>
+
+<style>
+  .alert {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 12px 16px;
+    border-left: 2px solid;
+    font-size: var(--t-body);
+    line-height: 1.5;
+  }
+
+  .alert--success { border-color: var(--ok);     background: color-mix(in srgb, var(--ok)     8%, transparent); }
+  .alert--warning { border-color: var(--amber);  background: color-mix(in srgb, var(--amber)  8%, transparent); }
+  .alert--error   { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
+  .alert--info    { border-color: var(--cyan);   background: color-mix(in srgb, var(--cyan)   8%, transparent); }
+
+  .alert-tag {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+    margin-top: 2px;
+  }
+  .alert--success .alert-tag { color: var(--ok); }
+  .alert--warning .alert-tag { color: var(--amber); }
+  .alert--error   .alert-tag { color: var(--danger); }
+  .alert--info    .alert-tag { color: var(--cyan); }
+
+  .alert-title {
+    font-family: var(--mono);
+    font-size: var(--t-micro);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .alert--success .alert-title { color: var(--ok); }
+  .alert--warning .alert-title { color: var(--amber); }
+  .alert--error   .alert-title { color: var(--danger); }
+  .alert--info    .alert-title { color: var(--cyan); }
+
+  .alert-msg {
+    font-size: var(--t-mono);
+    color: var(--ink-dim);
+    line-height: 1.5;
+  }
+
+  .alert-dismiss {
+    margin-left: auto;
+    flex-shrink: 0;
+    align-self: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--ink-faint);
+    font-size: 18px;
+    line-height: 1;
+    padding: 0;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

package/dist/components/{patterns → feedback}/Alert.svelte.d.ts

@@ -1,13 +1,15 @@
 import type { HTMLAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-type AlertVariant = 'ok' | 'amber' | 'danger' | 'info';
+type AlertVariant = 'success' | 'warning' | 'error' | 'info';
 interface Props extends HTMLAttributes<HTMLDivElement> {
     /** Colour variant — drives the tag glyph and border accent. @default 'info' */
     variant?: AlertVariant;
     /** Bold title text shown in the alert header. */
-    title: string;
+    title?: string;
     /** Body message text. */
     message?: string;
+    /** When provided, renders a dismiss × button inside the alert. */
+    ondismiss?: () => void;
     children?: Snippet;
     [key: string]: unknown;
 }

package/dist/components/feedback/Modal.stories.svelte

@@ -3,7 +3,6 @@
   import { expect, within, waitFor } from "storybook/test";
   import Modal from "./Modal.svelte";
   import Button from "../primitives/Button.svelte";
-  import { resolveTokenColor } from "../../storybook-utils.js";
 
   const { Story } = defineMeta({
     title: "Feedback/Modal",
@@ -15,29 +14,33 @@
   let openDefault     = $state(false);
   let openConfirm     = $state(false);
   let openDestructive = $state(false);
-  let openWithFooter  = $state(false);
-  let openBackdrop    = $state(false);
-  let openNoFooter    = $state(false);
 </script>
 
-<!-- AC-5, AC-6, AC-7, AC-13, AC-14 -->
+<!-- Default story: 12px mono uppercase title, close button right of title -->
 <Story name="Default"
   play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     const trigger = canvas.getByRole("button", { name: "Open Modal" });
-    // dialog not visible before trigger
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
     await userEvent.click(trigger);
-    const dialog = canvas.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-    await expect(dialog.getAttribute("aria-modal")).toBe("true");
-    await expect(dialog.getAttribute("aria-labelledby")).toBe("modal-title");
-    const heading = canvas.getByRole("heading", { level: 2, name: /CONFIRM ACTION/i });
-    await expect(heading).toBeVisible();
+    // title is h2#modal-title, visible
+    const title = canvasElement.querySelector("h2#modal-title") as HTMLElement;
+    await expect(title).not.toBeNull();
+    await expect(title).toBeVisible();
+    // 12px
+    await expect(getComputedStyle(title).fontSize).toBe("12px");
+    // uppercase
+    await expect(getComputedStyle(title).textTransform).toBe("uppercase");
+    // header justify-content space-between
+    const header = canvasElement.querySelector(".modal-header") as HTMLElement;
+    await expect(getComputedStyle(header).justifyContent).toBe("space-between");
+    // close button flex-shrink 0
     const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn).toBeVisible();
-    await expect(closeBtn).toBeEnabled();
-    await expect(closeBtn.getAttribute("type")).toBe("button");
+    await expect(getComputedStyle(closeBtn).flexShrink).toBe("0");
+    // close button is to the right of title
+    await expect(closeBtn.getBoundingClientRect().left).toBeGreaterThan(
+      title.getBoundingClientRect().right
+    );
+    // close modal
     await userEvent.click(closeBtn);
     await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
   }}>
@@ -48,25 +51,27 @@
     onclose={() => { openDefault = false }}
   >
     <p>This action cannot be undone. Are you sure you want to proceed?</p>
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => { openDefault = false }}>Cancel</Button>
+      <Button variant="primary">OK</Button>
+    {/snippet}
   </Modal>
 </Story>
 
-<!-- AC-5, AC-6, AC-8, AC-13, AC-14 -->
-<Story name="Confirm Variant"
+<!-- Confirm story: icon in body, no icon in header -->
+<Story name="Confirm"
   play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
     await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
-    const dialog = canvas.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-    const icon = canvasElement.querySelector(".modal-icon") as HTMLElement;
-    await expect(icon).toBeVisible();
-    await expect(icon.getAttribute("aria-hidden")).toBe("true");
-    await expect(icon.textContent?.trim()).toBe("!");
-    const amberColor = resolveTokenColor("--amber");
-    await expect(getComputedStyle(icon).backgroundColor).toBe(amberColor);
+    // .modal-variant-icon exists in body
+    const body = canvasElement.querySelector(".modal-body") as HTMLElement;
+    const confirmIcon = body.querySelector(".modal-variant-icon") as HTMLElement;
+    await expect(confirmIcon).not.toBeNull();
+    // title visible
+    const title = canvasElement.querySelector("h2#modal-title") as HTMLElement;
+    await expect(title).toBeVisible();
+    // close modal
     const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn.getAttribute("type")).toBe("button");
     await userEvent.click(closeBtn);
     await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
   }}>
@@ -78,25 +83,28 @@
     onclose={() => { openConfirm = false }}
   >
     <p>You are about to place an order for 1× Conduit PDX-2 at €200. Proceed?</p>
+    {#snippet footer()}
+      <Button variant="ghost" onclick={() => { openConfirm = false }}>Cancel</Button>
+      <Button variant="primary">Confirm</Button>
+    {/snippet}
   </Modal>
 </Story>
 
-<!-- AC-5, AC-6, AC-9, AC-13, AC-14 -->
-<Story name="Destructive Variant"
+<!-- Destructive story: icon in body, title visible -->
+<Story name="Destructive"
   play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
     await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
-    const dialog = canvas.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-    const icon = canvasElement.querySelector(".modal-icon") as HTMLElement;
+    // .modal-variant-icon exists in body
+    const body = canvasElement.querySelector(".modal-body") as HTMLElement;
+    const icon = body.querySelector(".modal-variant-icon") as HTMLElement;
+    await expect(icon).not.toBeNull();
     await expect(icon).toBeVisible();
-    await expect(icon.getAttribute("aria-hidden")).toBe("true");
-    await expect(icon.textContent?.trim()).toBe("!");
-    const dangerColor = resolveTokenColor("--danger");
-    await expect(getComputedStyle(icon).backgroundColor).toBe(dangerColor);
+    // title visible
+    const title = canvasElement.querySelector("h2#modal-title") as HTMLElement;
+    await expect(title).toBeVisible();
+    // close modal
     const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn.getAttribute("type")).toBe("button");
     await userEvent.click(closeBtn);
     await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
   }}>
@@ -108,85 +116,9 @@
     onclose={() => { openDestructive = false }}
   >
     <p>This will permanently delete the item. This action cannot be undone.</p>
-  </Modal>
-</Story>
-
-<!-- AC-5, AC-6, AC-10, AC-13, AC-14 -->
-<Story name="With Footer"
-  play={async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
-    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-    const footer = canvasElement.querySelector("footer");
-    await expect(footer).toBeInTheDocument();
-    const cancelBtn = canvas.getByRole("button", { name: /Cancel/i });
-    await expect(cancelBtn).toBeVisible();
-    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn.getAttribute("type")).toBe("button");
-    await userEvent.click(closeBtn);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
-  }}>
-  <Button onclick={() => { openWithFooter = true }}>Open Modal</Button>
-  <Modal
-    open={openWithFooter}
-    title="// WITH FOOTER"
-    onclose={() => { openWithFooter = false }}
-  >
-    <p>This modal includes a footer with action buttons.</p>
     {#snippet footer()}
-      <Button variant="ghost" onclick={() => { openWithFooter = false }}>Cancel</Button>
-      <Button variant="primary">Confirm</Button>
+      <Button variant="ghost" onclick={() => { openDestructive = false }}>Cancel</Button>
+      <Button variant="primary">Delete</Button>
     {/snippet}
   </Modal>
 </Story>
-
-<!-- AC-5, AC-6, AC-11, AC-13, AC-14 -->
-<Story name="Backdrop Close"
-  play={async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
-    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
-    const dialog = canvas.getByRole("dialog");
-    await expect(dialog).toBeVisible();
-    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn.getAttribute("type")).toBe("button");
-    // native .click() dispatches with event.target === dialog, triggering handleDialogClick
-    dialog.click();
-    // waitFor: Svelte $effect that closes the dialog is async
-    await waitFor(() => expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible());
-  }}>
-  <Button onclick={() => { openBackdrop = true }}>Open Modal</Button>
-  <Modal
-    open={openBackdrop}
-    title="// BACKDROP TEST"
-    onclose={() => { openBackdrop = false }}
-  >
-    <p>Click outside this panel on the backdrop to close.</p>
-  </Modal>
-</Story>
-
-<!-- AC-5, AC-6, AC-12, AC-13, AC-14 -->
-<Story name="No Footer"
-  play={async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
-    await userEvent.click(canvas.getByRole("button", { name: "Open Modal" }));
-    await expect(canvas.getByRole("dialog")).toBeVisible();
-    await expect(canvasElement.querySelector("footer")).toBeNull();
-    const closeBtn = canvas.getByRole("button", { name: /Close dialog/i });
-    await expect(closeBtn).toBeVisible();
-    await expect(closeBtn).toBeEnabled();
-    await expect(closeBtn.getAttribute("type")).toBe("button");
-    await userEvent.click(closeBtn);
-    await expect(canvas.getByRole("dialog", { hidden: true })).not.toBeVisible();
-  }}>
-  <Button onclick={() => { openNoFooter = true }}>Open Modal</Button>
-  <Modal
-    open={openNoFooter}
-    title="// NO FOOTER"
-    onclose={() => { openNoFooter = false }}
-  >
-    <p>Informational content shown without a footer action bar.</p>
-  </Modal>
-</Story>

package/dist/components/feedback/Modal.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
   import type { HTMLDialogAttributes } from 'svelte/elements'
   import type { Snippet } from 'svelte'
-  import Inline from '../layout/Inline.svelte'
-  import Spread from '../layout/Spread.svelte'
   import Text from '../primitives/Text.svelte'
   import Button from '../primitives/Button.svelte'
 
@@ -77,24 +75,24 @@
 >
   <div class="modal-inner">
     <header class="modal-header">
-      <Inline gap="xs">
-        {#if variant === 'destructive' || variant === 'confirm'}
-          <span class="modal-icon" aria-hidden="true">!</span>
-        {/if}
-        <Text variant="mono" as="h2" id="modal-title" size="lg" class="modal-title">{title}</Text>
-        <Button variant="ghost" type="button" aria-label="Close dialog" onclick={handleClose}>×</Button>
-      </Inline>
+      <Text variant="mono" size="xs" as="h2" id="modal-title" class="modal-title">{title}</Text>
+      <Button variant="ghost" type="button" aria-label="Close dialog" onclick={handleClose} class="modal-close">×</Button>
     </header>
 
     <div class="modal-body">
-      {@render children?.()}
+      {#if variant === 'confirm' || variant === 'destructive'}
+        <div class="modal-body-row">
+          <div class="modal-variant-icon" aria-hidden="true">!</div>
+          <div>{@render children?.()}</div>
+        </div>
+      {:else}
+        {@render children?.()}
+      {/if}
     </div>
 
     {#if footer}
       <footer class="modal-footer">
-        <Spread>
-          {@render footer()}
-        </Spread>
+        {@render footer()}
       </footer>
     {/if}
   </div>
@@ -122,7 +120,7 @@
   }
 
   .modal-inner {
-    background: var(--bg-elev);
+    background: var(--overlay);
     border: 1px solid var(--rule-strong);
     width: 100%;
     max-width: 480px;
@@ -137,6 +135,8 @@
     border-bottom: 1px solid var(--rule);
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    gap: var(--u);
   }
 
   .modal-footer {
@@ -144,31 +144,38 @@
     border-top: 1px solid var(--rule);
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    justify-content: flex-end;
     gap: var(--u2);
   }
 
-  .modal-icon {
-    display: inline-flex;
+  .modal-variant-icon {
+    display: flex;
     align-items: center;
     justify-content: center;
-    width: 22px;
-    height: 22px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     font-family: var(--mono);
-    font-size: 13px;
+    font-size: 18px;
     font-weight: 700;
     flex-shrink: 0;
   }
 
-  .modal--confirm .modal-icon {
-    background: var(--amber);
-    color: var(--bg);
+  .modal--confirm .modal-variant-icon {
+    border: 2px solid var(--amber);
+    color: var(--amber);
   }
 
-  .modal--destructive .modal-icon {
-    background: var(--danger);
-    color: var(--bg);
+  .modal--destructive .modal-variant-icon {
+    border: 2px solid var(--danger);
+    color: var(--danger);
+  }
+
+  .modal-body-row {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    gap: var(--u2);
   }
 
   .modal-body {
@@ -181,5 +188,19 @@
 
   .modal-header :global(.modal-title) {
     flex: 1;
+    color: var(--ink);
+  }
+
+  .modal-header :global(.modal-close) {
+    flex-shrink: 0;
+    font-size: 18px;
+    line-height: 1;
+    width: 28px;
+    height: 28px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    color: var(--ink-faint);
   }
 </style>