{
  "name": "Dialog",
  "type": "component",
  "description": "A modal dialog: a task that must be finished or abandoned before anything else. Portalled and theme-aware.",
  "export": "Dialog",
  "path": "@gtmi/strix-react/atoms/dialog",
  "figma": null,
  "figmaAbsent": "Base UI primitive. Figma draws no modal dialog.",
  "props": [
    {
      "name": "trigger",
      "type": "ReactElement",
      "description": "Clicking it opens the dialog, which is all an uncontrolled dialog needs."
    },
    {
      "name": "isModalOpen",
      "type": "boolean",
      "description": "Controlled open state. Pair with onModalVisibleChange."
    },
    {
      "name": "onModalVisibleChange",
      "type": "(open: boolean) => void"
    },
    {
      "name": "dismissible",
      "type": "boolean",
      "default": "true",
      "description": "Allow Escape and backdrop dismissal. Turn off for a dialog mid-task that should not vanish on a stray keypress."
    },
    {
      "name": "size",
      "type": "default | medium | small | large | full-screen",
      "default": "default",
      "description": "Popup width. `medium` is an alias for `default`, so the scale reads small | medium | large; `size=\"medium\"` used to be a type error, which is a plausible guess tsc caught only after someone wrote it. `full-screen` is the one that changes behaviour rather than only width -- it carries the accent splash and insets the close button."
    },
    {
      "name": "ariaLabel",
      "type": "string",
      "description": "Accessible name. Provide this or ariaLabelledBy."
    },
    {
      "name": "ariaLabelledBy",
      "type": "string",
      "description": "Id of an element inside the dialog that names it."
    },
    {
      "name": "initialFocus",
      "type": "boolean",
      "default": "true",
      "description": "Move focus into the dialog on open. Leave it on: the focus trap is the point of a modal."
    },
    {
      "name": "renderDefaultBackdrop",
      "type": "boolean",
      "default": "true"
    },
    {
      "name": "showFullScreenModalAccent",
      "type": "boolean",
      "default": "true",
      "description": "Accent splash, full-screen only."
    },
    {
      "name": "portalContainer",
      "type": "HTMLElement | RefObject | null",
      "description": "Defaults to document.body."
    }
  ],
  "parts": [
    {
      "name": "Dialog",
      "description": "Root, backdrop and popup together."
    },
    {
      "name": "Dialog.Root / Dialog.Backdrop / Dialog.Popup",
      "description": "For a layout that needs the parts placed individually."
    },
    {
      "name": "Dialog.CloseButton",
      "description": "Close button. Position: 'absolute' (default) or 'static'/'inline'. Props: ariaLabel, icon, onCloseAction, position."
    }
  ],
  "ai_tags": ["dialog", "modal", "overlay", "portal", "compound", "primitive"],
  "since": "0.2.0",
  "tokens_used": [
    "--color-surface-panel",
    "--color-text-primary",
    "--color-alpha-black-alpha-700",
    "--color-accent-sky-025",
    "--color-border-accent",
    "--color-icon-secondary",
    "--radius-xxl",
    "--blur-splash",
    "--spacing-gap-500",
    "--spacing-gap-900",
    "--z-index-modal",
    "--z-index-overlay",
    "--z-index-deep",
    "--animate-popup-in",
    "--animate-popup-out"
  ],
  "notes": "Ported from maker-ds's `modal`, renamed to `dialog` to match the spec's primitive list. PORTALLED: stamps the active theme on the popup, asserted on both the convenience and compound forms. TESTING NOTE: Base UI 1.6 does not set aria-modal - it enforces modality by marking everything outside the portal aria-hidden, which is current guidance - so the modality test asserts that instead. The Tab focus trap CANNOT be verified in jsdom: Base UI's focus guards are spans outside the popup whose focus handlers do not run there, so Tab appears to escape. The tests assert the mechanism (guards present, focus moves inside on open, focus returns to the trigger on close) and the trap itself is listed as needing a browser. Use a Dialog when the interruption is the point; use a Popover when the content is supplementary. SURFACE AND SCRIM ARE A RULE-2 DERIVATION, since Figma draws no modal: the popup was `--color-surface-base`, which in dark is `color/brand/ink` — the page — so it had no container at all, measured popup bg === page bg === rgb(0,13,37). It now carries `--color-surface-panel` gray-850 #191f36, Figma's own Panel-configurations fill and the same value Transcript.json records Figma drawing panels on, 1.1903:1 above the ink. The scrim moved 0.2 -> 0.7 on the same maker-ds alpha ramp (`rgba(0,13,37,α)`, declared upstream through 0.9): at 0.2 it darkens white by 1.56:1 and the trigger and page behind still read as live, at 0.7 by 7.40:1 and they read as inert. Verified from screenshots at 0.2/0.3/0.5/0.7, not from tests — jsdom applies no CSS and the class was silently emitting nothing at one point."
}