@designa8/vibedesign-stripe-deepseek-2-176b 0.1.2 → 0.2.0

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.1.2**.
+Complete design system generated by Atoms Design, version **0.2.0**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/styles.css

@@ -19,7 +19,6 @@
     --container-3xl: 48rem;
     --container-4xl: 56rem;
     --container-5xl: 64rem;
-    --container-6xl: 72rem;
     --font-weight-normal: 400;
     --tracking-wide: 0.025em;
     --radius-xs: 4px;
@@ -162,6 +161,8 @@
     --container-dialog: 420px;
     --container-sidebar: 240px;
     --container-sidebar-rail: 72px;
+    --container-palette: 640px;
+    --container-dialog-md: 560px;
     --grid-template-columns-system: repeat(12, minmax(0, 1fr));
   }
 }
@@ -818,6 +819,9 @@
   .max-h-64 {
     max-height: calc(var(--spacing) * 64);
   }
+  .max-h-full {
+    max-height: 100%;
+  }
   .min-h-0 {
     min-height: 0;
   }
@@ -926,21 +930,24 @@
   .max-w-5xl {
     max-width: var(--container-5xl);
   }
-  .max-w-6xl {
-    max-width: var(--container-6xl);
-  }
   .max-w-16 {
     max-width: calc(var(--spacing) * 16);
   }
   .max-w-dialog {
     max-width: var(--container-dialog);
   }
+  .max-w-dialog-md {
+    max-width: var(--container-dialog-md);
+  }
   .max-w-full {
     max-width: 100%;
   }
   .max-w-md {
     max-width: var(--spacing-md);
   }
+  .max-w-palette {
+    max-width: var(--container-palette);
+  }
   .max-w-prose {
     max-width: 65ch;
   }
@@ -1608,6 +1615,12 @@
   .bg-semantic-error-soft {
     background-color: var(--color-semantic-error-soft);
   }
+  .bg-semantic-error\/60 {
+    background-color: color-mix(in srgb, #EA2261 60%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+    }
+  }
   .bg-semantic-info-soft {
     background-color: var(--color-semantic-info-soft);
   }
@@ -2663,6 +2676,16 @@
       }
     }
   }
+  .hover\:bg-semantic-error\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #EA2261 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-surface-soft {
     &:hover {
       @media (hover: hover) {
@@ -2733,6 +2756,13 @@
       }
     }
   }
+  .hover\:text-semantic-error {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-semantic-error);
+      }
+    }
+  }
   .hover\:underline {
     &:hover {
       @media (hover: hover) {
@@ -2787,6 +2817,11 @@
       color: var(--color-primary);
     }
   }
+  .focus-visible\:text-semantic-error {
+    &:focus-visible {
+      color: var(--color-semantic-error);
+    }
+  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2913,6 +2948,11 @@
       border-color: var(--color-primary-active);
     }
   }
+  .active\:border-semantic-error {
+    &:active {
+      border-color: var(--color-semantic-error);
+    }
+  }
   .active\:border-transparent {
     &:active {
       border-color: transparent;
@@ -2944,6 +2984,11 @@
       }
     }
   }
+  .active\:bg-semantic-error {
+    &:active {
+      background-color: var(--color-semantic-error);
+    }
+  }
   .active\:bg-surface-soft {
     &:active {
       background-color: var(--color-surface-soft);
@@ -3039,6 +3084,14 @@
       }
     }
   }
+  .disabled\:bg-semantic-error\/60 {
+    &:disabled {
+      background-color: color-mix(in srgb, #EA2261 60%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-semantic-error) 60%, transparent);
+      }
+    }
+  }
   .disabled\:bg-surface-soft {
     &:disabled {
       background-color: var(--color-surface-soft);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-2-176b",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/Button/Button.tsx

@@ -3,6 +3,8 @@ import * as React from "react";
 type ButtonVariant =
   | "primary"
   | "primary-soft"
+  | "danger"
+  | "danger-soft"
   | "secondary"
   | "outline"
   | "outline-soft"
@@ -88,6 +90,21 @@ const variantStyles: Record<ButtonVariant, string> = {
     "focus-visible:bg-canvas focus-visible:text-primary focus-visible:border-primary focus-visible:ring-focus-blue/40",
     "disabled:bg-primary-disabled disabled:text-muted disabled:border-transparent",
   ),
+  /**
+   * The destructive twin of `primary`: the same filled geometry on the error
+   * hue, for the action that removes money, deletes a record, or ends access.
+   * Hover inverts to the error outline exactly like the brand fill, so the
+   * paired footer keeps one press grammar whichever tone the commit wears.
+   */
+  danger: cn(
+    focusRing,
+    "justify-center rounded-xl active:scale-[0.98]",
+    "border-2 bg-semantic-error text-on-primary border-transparent",
+    "hover:bg-canvas hover:text-semantic-error hover:border-semantic-error",
+    "active:bg-semantic-error active:text-on-primary active:border-semantic-error",
+    "focus-visible:bg-canvas focus-visible:text-semantic-error focus-visible:border-semantic-error focus-visible:ring-focus-blue/40",
+    "disabled:bg-primary-disabled disabled:text-muted disabled:border-transparent",
+  ),
   /**
    * The same filled pill at reduced strength: the action is committed and the
    * request is in flight, so the control keeps its size, its label, and the
@@ -102,6 +119,19 @@ const variantStyles: Record<ButtonVariant, string> = {
     "focus-visible:ring-focus-blue/40",
     "disabled:pointer-events-none disabled:border-transparent disabled:bg-primary/60 disabled:text-on-primary",
   ),
+  /**
+   * The dimmed destructive twin, used while a destructive request is in
+   * flight: it holds the pill's size and label, keeps the error hue, and pins
+   * the fill so a working control can never be hovered brighter.
+   */
+  "danger-soft": cn(
+    focusRing,
+    "justify-center rounded-xl active:scale-[0.98]",
+    "border-transparent bg-semantic-error/60 text-on-primary",
+    "hover:bg-semantic-error/60 hover:text-on-primary hover:border-transparent",
+    "focus-visible:ring-focus-blue/40",
+    "disabled:pointer-events-none disabled:border-transparent disabled:bg-semantic-error/60 disabled:text-on-primary",
+  ),
   // Persistent outline treatment.
   secondary: cn(
     focusRing,

package/src/atoms/Modal/Modal.tsx

@@ -14,16 +14,36 @@ const REASONS: DropdownOption[] = [
   { value: "other", label: "Other" },
 ];
 
+/** Everything the focus trap may move to, in DOM order. */
+const FOCUSABLE =
+  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+/** The money line of the default refund body, kept out of the props default so
+ *  a caller that drops the reason control can also drop the amount. */
+const DEFAULT_AMOUNT = "$89.00";
+
 /**
  * The dismiss layer is pinned inline rather than with a utility: the Button's
  * own geometry pins `position: relative`, and a style declaration is the only
  * thing that reliably wins over it without a second set of position classes.
+ * Inside a host panel it is pinned to that panel instead of the viewport, so the
+ * dimming stops at the panel's edge.
  */
-const SCRIM_STYLE: React.CSSProperties = {
-  position: "fixed",
+const scrimStyle = (contained: boolean): React.CSSProperties => ({
+  position: contained ? "absolute" : "fixed",
   inset: 0,
   background: "color-mix(in srgb, var(--color-scrim) 50%, transparent)",
-};
+});
+
+const sizeStyles = {
+  sm: "max-w-dialog",
+  md: "max-w-dialog-md",
+  lg: "max-w-palette",
+} as const;
+
+export type ModalSize = keyof typeof sizeStyles;
+export type ModalConfirmTone = "primary" | "danger";
+export type ModalPlacement = "center" | "top";
 
 export interface ModalProps
   extends Omit<
@@ -40,7 +60,34 @@ export interface ModalProps
   title?: string;
   /** Supporting line beneath the heading. */
   description?: string;
-  /** Money value under the description, rendered in tabular figures. */
+  /**
+   * Replaces the whole default body (amount + reason). The body scrolls between
+   * the pinned header and the pinned footer, so a long form never pushes the
+   * actions out of the viewport.
+   */
+  children?: React.ReactNode;
+  /**
+   * Replaces the default Cancel / Confirm pair. Pass `null` to drop the footer
+   * entirely — a command palette has nowhere to put actions.
+   */
+  footer?: React.ReactNode | null;
+  /** Panel width: `sm` dialog (420), `md` form (560), `lg` palette (640). */
+  size?: ModalSize;
+  /**
+   * `center` is the transactional dialog. `top` anchors the panel near the top
+   * of the viewport, which is where a command palette belongs.
+   */
+  placement?: ModalPlacement;
+  /**
+   * Drops the header row. A palette makes its search input the header, so the
+   * title stays the accessible name without a visible heading.
+   */
+  hideHeader?: boolean;
+  /**
+   * Money value under the description, rendered in tabular figures. It is part
+   * of the default refund body only: omitted, the default layout still shows
+   * the payment total unless the reason control is dropped as well.
+   */
   amount?: string;
   /** Label above the reason control. */
   reasonLabel?: string;
@@ -57,8 +104,14 @@ export interface ModalProps
    * It thickens that one stroke and never adds a second box.
    */
   reasonFocused?: boolean;
+  /** Drops the reason control from the default body, leaving the amount. */
+  hideReason?: boolean;
   /** In-flight state: dims the reason field and swaps the confirm action. */
   confirming?: boolean;
+  /** Tone of the committing action; `danger` paints it on the error hue. */
+  confirmTone?: ModalConfirmTone;
+  /** Holds the committing action closed until the form is valid. */
+  confirmDisabled?: boolean;
   /** Label of the dismissive action. */
   cancelLabel?: string;
   /** Label of the committing action. */
@@ -69,6 +122,12 @@ export interface ModalProps
   onCancel?: () => void;
   /** Fires when the committing action is taken. */
   onConfirm?: () => void;
+  /**
+   * Portals the dialog into this element and pins it there with `absolute`
+   * positioning instead of covering the viewport. Page scroll stays unlocked,
+   * which is what a demo of the dialog inside a panel needs.
+   */
+  container?: HTMLElement | null;
   /**
    * Renders the panel in place as a static board tile instead of portalling it
    * over a scrim. Documentation boards use it to show several states at once;
@@ -78,16 +137,19 @@ export interface ModalProps
 }
 
 /**
- * A 420px refund dialog. It is the modal organism for an irreversible money
- * action: heading and dismiss glyph on one line, a muted instruction, the
+ * The system dialog. Called with no children it is still the refund
+ * confirmation: heading and dismiss glyph on one line, a muted instruction, the
  * amount in tabular figures, one reason select, and a paired footer that reads
- * dismiss-then-commit from left to right.
+ * dismiss-then-commit. Called with children it is any dialog — a dispute form,
+ * a payment-link wizard, an invite, a ⌘K palette — keeping the same pinned
+ * header, scrolling body, and pinned footer.
  *
- * The overlay never scrolls. The scrim is its own fixed layer so it covers the
- * viewport at every scroll position; the panel is capped to the viewport, keeps
- * its header and footer pinned, and scrolls only its body. The reason select
- * portals its listbox to `document.body` at `--z-popover`, above this dialog's
- * `--z-modal`, so opening it can never grow the panel or paint underneath it.
+ * The overlay never scrolls. The scrim is its own layer so it covers the whole
+ * surface at every scroll position; the panel is capped to the viewport, keeps
+ * its header and footer pinned, and scrolls only its body. Any select inside
+ * the body portals its listbox to `document.body` at `--z-popover`, above this
+ * dialog's `--z-modal`, so opening it can never grow the panel or paint
+ * underneath it.
  */
 export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
   (
@@ -97,19 +159,28 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       onOpenChange,
       title = "Refund payment",
       description = "Refund this payment to the customer.",
-      amount = "$89.00",
+      children,
+      footer,
+      size = "sm",
+      placement = "center",
+      hideHeader = false,
+      amount,
       reasonLabel = "Reason",
       reasons = REASONS,
       reason,
       defaultReason = REASONS[0].value,
       onReasonChange,
       reasonFocused = false,
+      hideReason = false,
       confirming,
+      confirmTone = "primary",
+      confirmDisabled = false,
       cancelLabel = "Cancel",
       confirmLabel = "Confirm refund",
       confirmingLabel = "Confirming...",
       onCancel,
       onConfirm,
+      container,
       inline = false,
       className,
       id,
@@ -122,6 +193,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
     const titleId = `${rootId}-title`;
     const descriptionId = `${rootId}-description`;
 
+    const panelRef = React.useRef<HTMLDivElement | null>(null);
     const closeRef = React.useRef<HTMLButtonElement | null>(null);
     const restoreFocusRef = React.useRef<HTMLElement | null>(null);
 
@@ -134,6 +206,30 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
     const isConfirming =
       confirming !== undefined ? confirming : internalConfirming;
     const state = isOpen ? "open" : "closed";
+    const contained = Boolean(container);
+    /* The refund body owns the default money line; a caller that strips the
+       reason control has replaced that layout and owns the amount itself. */
+    const showDefaultBody = children === undefined;
+    const resolvedAmount =
+      amount !== undefined
+        ? amount
+        : showDefaultBody && !hideReason
+          ? DEFAULT_AMOUNT
+          : undefined;
+    const showFooter = footer !== null;
+    const hasCustomFooter = footer !== undefined;
+
+    const assignPanelRef = React.useCallback(
+      (node: HTMLDivElement | null) => {
+        panelRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+        }
+      },
+      [ref],
+    );
 
     const setOpenState = React.useCallback(
       (next: boolean) => {
@@ -157,14 +253,21 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       }
     }, [isOpen]);
 
-    /* Remember where focus came from, then move it inside the panel. */
+    /* Remember where focus came from, then move it inside the panel. The close
+       gutter is the usual first stop; a header-less palette focuses its input. */
     React.useEffect(() => {
       if (!isOpen || inline) {
         return;
       }
       restoreFocusRef.current = document.activeElement as HTMLElement | null;
       const frame = window.requestAnimationFrame(() => {
-        closeRef.current?.focus({ preventScroll: true });
+        const panel = panelRef.current;
+        const target =
+          closeRef.current ??
+          panel?.querySelector<HTMLElement>(FOCUSABLE) ??
+          panel ??
+          null;
+        target?.focus({ preventScroll: true });
       });
       return () => window.cancelAnimationFrame(frame);
     }, [isOpen, inline]);
@@ -183,6 +286,55 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       return () => document.removeEventListener("keydown", handleKeyDown);
     }, [isOpen, inline, close]);
 
+    /* A viewport dialog holds the page still. A dialog inside a panel does not. */
+    React.useEffect(() => {
+      if (!isOpen || inline || contained) {
+        return;
+      }
+      const previous = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = previous;
+      };
+    }, [isOpen, inline, contained]);
+
+    /**
+     * Tab cycles inside the panel rather than escaping to the page behind it,
+     * and wraps at both ends. Anything the component portalled to `body` — a
+     * select's listbox — is deliberately outside this loop.
+     */
+    const trapFocus = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key !== "Tab" || inline) {
+        return;
+      }
+      const root = event.currentTarget;
+      const focusables = Array.from(
+        root.querySelectorAll<HTMLElement>(FOCUSABLE),
+      ).filter((element) => element.getClientRects().length > 0);
+      if (focusables.length === 0) {
+        event.preventDefault();
+        root.focus({ preventScroll: true });
+        return;
+      }
+      const first = focusables[0];
+      const last = focusables[focusables.length - 1];
+      const active = document.activeElement as HTMLElement | null;
+      const inside = active ? root.contains(active) : false;
+
+      if (!inside) {
+        event.preventDefault();
+        (event.shiftKey ? last : first).focus();
+        return;
+      }
+      if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      } else if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      }
+    };
+
     const chooseReason = React.useCallback(
       (value: string) => {
         if (reason === undefined) {
@@ -203,17 +355,36 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
       onConfirm?.();
     };
 
+    const confirmVariant =
+      confirmTone === "danger"
+        ? isConfirming
+          ? "danger-soft"
+          : "danger"
+        : isConfirming
+          ? "primary-soft"
+          : "primary";
+
     const panel = (
       <div
-        ref={ref}
+        ref={assignPanelRef}
         role="dialog"
-        aria-modal={inline ? undefined : true}
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
+        aria-modal={inline || contained ? undefined : true}
+        aria-labelledby={hideHeader ? undefined : titleId}
+        aria-label={hideHeader ? title : undefined}
+        aria-describedby={
+          hideHeader || !showDefaultBody ? undefined : descriptionId
+        }
         data-state={state}
+        tabIndex={-1}
+        onKeyDown={trapFocus}
         className={cn(
-          "relative flex w-full max-w-dialog flex-col overflow-hidden",
-          "max-h-[calc(100dvh-2rem)]",
+          "relative flex w-full flex-col overflow-hidden",
+          sizeStyles[size],
+          contained
+            ? "max-h-full"
+            : placement === "top"
+              ? "max-h-[calc(88dvh-1rem)]"
+              : "max-h-[calc(100dvh-2rem)]",
           "rounded-lg border border-hairline bg-surface shadow-overlay",
           "transition duration-200 ease-out",
           "data-[state=open]:translate-y-0 data-[state=open]:scale-100 data-[state=open]:opacity-100",
@@ -222,79 +393,101 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         )}
         {...rest}
       >
-        <div className="flex shrink-0 items-start justify-between gap-lg px-xl pt-xl">
-          <h2
-            id={titleId}
-            className="text-display-md font-weight-body-md text-ink"
-          >
-            {title}
-          </h2>
-          <Button
-            ref={closeRef}
-            variant="bare"
-            size="icon-sm"
-            aria-label="Close dialog"
-            onClick={close}
-            className="-mr-xs -mt-xs text-ink hover:text-muted"
-            leadingIcon={<Icon name="x" size={18} strokeWidth={1.75} />}
-          />
-        </div>
-
-        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl pt-sm">
-          <p id={descriptionId} className="text-body-md text-body">
-            {description}
-          </p>
-
-          <p
-            className="mt-lg text-display-lg text-ink [font-feature-settings:'tnum']"
-          >
-            {amount}
-          </p>
-
-          <div className="mt-lg">
-            <Dropdown
-              label={reasonLabel}
-              labelVariant="plain"
-              tone="soft"
-              options={reasons}
-              value={selectedReason}
-              onValueChange={chooseReason}
-              disabled={isConfirming}
-              forceFocus={reasonFocused}
-              ariaLabel={`${reasonLabel} for this refund`}
+        {hideHeader ? null : (
+          <div className="flex shrink-0 items-start justify-between gap-lg px-xl pt-xl">
+            <h2
+              id={titleId}
+              className="text-display-md font-weight-body-md text-ink"
+            >
+              {title}
+            </h2>
+            <Button
+              ref={closeRef}
+              variant="bare"
+              size="icon-sm"
+              aria-label="Close dialog"
+              onClick={close}
+              className="-mr-xs -mt-xs text-ink hover:text-muted"
+              leadingIcon={<Icon name="x" size={18} strokeWidth={1.75} />}
             />
           </div>
-        </div>
+        )}
 
-        <div className="grid shrink-0 grid-cols-5 gap-md px-xl pb-xl pt-lg">
-          <Button
-            variant="outline-soft"
-            size="lg"
-            fullWidth
-            onClick={handleCancel}
-            className="col-span-2"
-          >
-            {cancelLabel}
-          </Button>
-          <Button
-            variant={isConfirming ? "primary-soft" : "primary"}
-            size="lg"
-            fullWidth
-            disabled={isConfirming}
-            onClick={handleConfirm}
-            className="col-span-3"
-            leadingIcon={
-              isConfirming ? (
-                <span
-                  aria-hidden="true"
-                  className="size-4 shrink-0 animate-spin rounded-full border-2 border-on-primary/70 border-t-transparent"
-                />
-              ) : undefined
-            }
-          >
-            {isConfirming ? confirmingLabel : confirmLabel}
-          </Button>
+        <div
+          className={cn(
+            "min-h-0 flex-1 overflow-y-auto overscroll-contain px-xl",
+            hideHeader ? "pt-lg" : "pt-sm",
+            showFooter ? "" : "pb-xl",
+          )}
+        >
+          {showDefaultBody ? (
+            <>
+              <p id={descriptionId} className="text-body-md text-body">
+                {description}
+              </p>
+
+              {resolvedAmount === undefined ? null : (
+                <p className="mt-lg text-display-lg text-ink [font-feature-settings:'tnum']">
+                  {resolvedAmount}
+                </p>
+              )}
+
+              {hideReason ? null : (
+                <div className="mt-lg">
+                  <Dropdown
+                    label={reasonLabel}
+                    labelVariant="plain"
+                    tone="soft"
+                    options={reasons}
+                    value={selectedReason}
+                    onValueChange={chooseReason}
+                    disabled={isConfirming}
+                    forceFocus={reasonFocused}
+                    ariaLabel={`${reasonLabel} for this refund`}
+                  />
+                </div>
+              )}
+            </>
+          ) : (
+            children
+          )}
         </div>
+
+        {showFooter ? (
+          hasCustomFooter ? (
+            <div className="shrink-0 px-xl pb-xl pt-lg">{footer}</div>
+          ) : (
+            <div className="grid shrink-0 grid-cols-5 gap-md px-xl pb-xl pt-lg">
+              <Button
+                variant="outline-soft"
+                size="lg"
+                fullWidth
+                onClick={handleCancel}
+                className="col-span-2"
+              >
+                {cancelLabel}
+              </Button>
+              <Button
+                variant={confirmVariant}
+                size="lg"
+                fullWidth
+                disabled={isConfirming || confirmDisabled}
+                onClick={handleConfirm}
+                className="col-span-3"
+                leadingIcon={
+                  isConfirming ? (
+                    <span
+                      aria-hidden="true"
+                      className="size-4 shrink-0 animate-spin rounded-full border-2 border-on-primary/70 border-t-transparent"
+                    />
+                  ) : undefined
+                }
+              >
+                {isConfirming ? confirmingLabel : confirmLabel}
+              </Button>
+            </div>
+          )
+        ) : null}
       </div>
     );
 
@@ -311,13 +504,17 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
         data-state={state}
         inert={isOpen ? undefined : true}
         className={cn(
-          "fixed inset-0 flex items-center justify-center p-base",
+          "flex justify-center",
+          contained ? "absolute inset-0" : "fixed inset-0",
+          placement === "top"
+            ? "items-start px-base pt-[12dvh]"
+            : "items-center p-base",
           "transition duration-200 ease-out",
           "data-[state=closed]:pointer-events-none data-[state=closed]:invisible",
         )}
         style={{ zIndex: "var(--z-modal, 1200)" }}
       >
-        {/* Its own fixed layer, so the scrim covers the viewport. */}
+        {/* Its own layer, so the scrim covers the whole surface. */}
         <Button
           type="button"
           variant="bare"
@@ -326,7 +523,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
           aria-label="Close dialog"
           data-state={state}
           onClick={close}
-          style={SCRIM_STYLE}
+          style={scrimStyle(contained)}
           className={cn(
             "transition-opacity duration-200 ease-out",
             "data-[state=open]:opacity-100 data-[state=closed]:opacity-0",
@@ -335,7 +532,7 @@ export const Modal = React.forwardRef<HTMLDivElement, ModalProps>(
 
         {panel}
       </div>,
-      document.body,
+      container ?? document.body,
     );
   },
 );

package/src/atoms/Modal/index.ts

@@ -1,2 +1,7 @@
 export { Modal } from "./Modal";
-export type { ModalProps } from "./Modal";
+export type {
+  ModalProps,
+  ModalSize,
+  ModalConfirmTone,
+  ModalPlacement,
+} from "./Modal";

package/src/atoms/Modal/preview.tsx

@@ -1,97 +1,179 @@
 import * as React from "react";
-import { Button } from "../Button";
 import { Modal } from "./Modal";
+import { Button } from "../Button";
+import { Input } from "../Input";
+import { Icon } from "../Icon";
 
-const BOARDS = [
-  {
-    id: "default",
-    label: "DEFAULT",
-    blurb: "Refund dialog with amount and reason.",
-  },
-  {
-    id: "focus",
-    label: "FOCUS",
-    blurb: "Focused reason select control.",
-  },
-  {
-    id: "confirming",
-    label: "CONFIRMING",
-    blurb: "Confirming state after action.",
-  },
-] as const;
+const COMMANDS = [
+  { icon: "search", label: "Open payment search", hint: "G then P" },
+  { icon: "credit-card", label: "Refund a payment", hint: "R" },
+  { icon: "user", label: "Jump to a customer", hint: "C" },
+  { icon: "file", label: "Open dispute evidence", hint: "D" },
+];
 
-/**
- * Every board renders the real dialog in place, so the amount, the reason
- * select, and the paired footer are the same markup in each state. The tiles
- * take the dialog's own width, so a panel is never squeezed below 420px —
- * they simply wrap when the canvas is narrower than two of them.
- *
- * The last section triggers the portalled dialog: it opens over a scrim and
- * closes on Escape, on the dismiss glyph, or on Cancel.
- */
 export default function ModalPreview() {
-  const [open, setOpen] = React.useState(false);
-  const [reason, setReason] = React.useState("customer-request");
-  const [confirming, setConfirming] = React.useState(false);
+  const [refundOpen, setRefundOpen] = React.useState(false);
+  const [dangerOpen, setDangerOpen] = React.useState(false);
+  const [formOpen, setFormOpen] = React.useState(false);
+  const [paletteOpen, setPaletteOpen] = React.useState(false);
+  const [containedOpen, setContainedOpen] = React.useState(false);
+  const [host, setHost] = React.useState<HTMLDivElement | null>(null);
+  const [amount, setAmount] = React.useState("24.00");
+  const [query, setQuery] = React.useState("");
 
-  return (
-    <div className="w-full max-w-6xl mx-auto p-lg space-y-xl">
-      <div className="flex w-full flex-col gap-sm">
-        <h2 className="text-display-md text-ink">Modal / Dialog</h2>
-        <p className="text-body-md text-body">
-          420px dialog for refunding a payment, with amount, reason, and actions.
-        </p>
-      </div>
-
-      <div className="flex w-full flex-wrap items-start gap-xl">
-        {BOARDS.map((board) => (
-          <div
-            key={board.id}
-            className="flex w-full max-w-dialog flex-col gap-md"
-          >
-            <div className="flex w-full flex-col gap-xs">
-              <div className="flex w-full">
-                <span className="rounded-full bg-primary-subdued px-md py-xxs text-micro-cap text-primary-on-subdued">
-                  {board.label}
-                </span>
-              </div>
-              <span className="text-body-md text-body">{board.blurb}</span>
-            </div>
+  const results = COMMANDS.filter((command) =>
+    command.label.toLowerCase().includes(query.trim().toLowerCase()),
+  );
 
-            <Modal
-              inline
-              reasonFocused={board.id === "focus"}
-              confirming={board.id === "confirming"}
-            />
-          </div>
-        ))}
+  return (
+    <div className="w-full max-w-3xl mx-auto space-y-lg p-lg">
+      <div className="flex flex-wrap items-center gap-sm">
+        <Button variant="primary" size="md" onClick={() => setRefundOpen(true)}>
+          Refund payment
+        </Button>
+        <Button
+          variant="outline-soft"
+          size="md"
+          onClick={() => setDangerOpen(true)}
+        >
+          Cancel a payout
+        </Button>
+        <Button
+          variant="outline-soft"
+          size="md"
+          onClick={() => setFormOpen(true)}
+        >
+          Edit refund amount
+        </Button>
+        <Button
+          variant="secondary"
+          size="md"
+          onClick={() => setPaletteOpen(true)}
+        >
+          Search commands
+        </Button>
       </div>
 
-      <div className="flex w-full flex-wrap items-center justify-between gap-md rounded-xl border border-hairline bg-surface-soft p-lg">
-        <p className="text-body-md text-body">
-          Open the live dialog to try the motion and the portalled reason list.
+      <div
+        ref={setHost}
+        className="relative overflow-hidden rounded-lg border border-hairline bg-canvas p-lg"
+      >
+        <p className="text-body-sm text-ink">Dialog hosted inside a panel</p>
+        <p className="mt-xs text-caption text-muted">
+          Portalled into this card and positioned absolutely, so page scroll
+          stays unlocked and the dimming stops at the panel edge.
         </p>
         <Button
+          variant="outline-soft"
           size="sm"
-          variant="primary"
-          onClick={() => {
-            setConfirming(false);
-            setOpen(true);
-          }}
+          className="mt-md"
+          onClick={() => setContainedOpen(true)}
         >
-          Open refund dialog
+          Invite teammate
         </Button>
+
+        <Modal
+          open={containedOpen}
+          onOpenChange={setContainedOpen}
+          container={host}
+          title="Invite teammate"
+          description="They get access to payments for this workspace."
+          hideReason
+          cancelLabel="Not now"
+          confirmLabel="Send invite"
+        />
       </div>
 
+      {/* The dialog with no children is still the refund confirmation. */}
       <Modal
-        open={open}
-        onOpenChange={setOpen}
-        reason={reason}
-        onReasonChange={setReason}
-        confirming={confirming}
-        onConfirm={() => setConfirming(true)}
-        onCancel={() => setOpen(false)}
+        open={refundOpen}
+        onOpenChange={setRefundOpen}
+        defaultReason="customer-request"
       />
+
+      {/* Destructive commit on the error hue. */}
+      <Modal
+        open={dangerOpen}
+        onOpenChange={setDangerOpen}
+        title="Cancel this payout"
+        description="The payout to your bank is cancelled and the balance returns to your account."
+        amount="$1,240.00"
+        hideReason
+        confirmTone="danger"
+        confirmLabel="Cancel payout"
+        cancelLabel="Keep payout"
+      />
+
+      {/* Custom body, default footer, held closed until the field has a value. */}
+      <Modal
+        open={formOpen}
+        onOpenChange={setFormOpen}
+        size="md"
+        title="Edit refund amount"
+        description="The customer sees the new amount within one business day."
+        confirmLabel="Save amount"
+        confirmDisabled={amount.trim().length === 0}
+      >
+        <div className="space-y-md pt-sm">
+          <Input
+            label="Refund amount"
+            labelVariant="plain"
+            value={amount}
+            onChange={(event) => setAmount(event.target.value)}
+            helper="Up to $89.00 can be returned on this payment."
+          />
+          <p className="text-caption text-muted">
+            Refunds are final and cannot be reversed from this panel.
+          </p>
+        </div>
+      </Modal>
+
+      {/* Command palette: top placement, wide panel, no header, no footer. */}
+      <Modal
+        open={paletteOpen}
+        onOpenChange={setPaletteOpen}
+        size="lg"
+        placement="top"
+        hideHeader
+        footer={null}
+        title="Search commands"
+      >
+        <div className="space-y-sm">
+          <Input
+            ariaLabel="Search commands"
+            placeholder="Search commands…"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            leading={<Icon name="search" size={16} />}
+            chrome="none"
+          />
+          <ul>
+            {results.length === 0 ? (
+              <li className="px-md py-sm text-body-sm text-muted">
+                No commands match “{query}”.
+              </li>
+            ) : (
+              results.map((command) => (
+                <li key={command.label}>
+                  <Button
+                    variant="row"
+                    size="row"
+                    onClick={() => setPaletteOpen(false)}
+                    leadingIcon={<Icon name={command.icon} size={16} />}
+                    trailingIcon={
+                      <span className="text-caption text-muted-soft">
+                        {command.hint}
+                      </span>
+                    }
+                  >
+                    {command.label}
+                  </Button>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      </Modal>
     </div>
   );
 }

package/src/tokens.css

@@ -216,6 +216,7 @@
   --container-page: 1240px;
   --container-palette: 640px;
   --container-auth: 400px;
+  --container-dialog-md: 560px;
   --grid-template-columns-system: repeat(12, minmax(0, 1fr));
   --default-font-family: var(--font-body);
 }