{
  "title": "Sheet",
  "path": "/components/sheet",
  "url": "https://design.werklist.com/components/sheet",
  "text": "https://design.werklist.com/agent/components/sheet",
  "summary": "A sheet is a dialog that enters from the bottom of a phone or the right edge of a wide window.",
  "version": "2.1.2",
  "kind": "component",
  "name": "Sheet",
  "purpose": "A dialog that enters from an edge: from the bottom on phones, from the right on wide screens.",
  "use": [
    "The phone form of a dialog, below 640 px",
    "A popover that holds a form, on a touch screen below 640 px",
    "Details or settings read beside the page, as a side sheet from the right",
    "A long list tied to the page, such as members or history"
  ],
  "avoid": [
    "A task that needs full attention on a wide screen: use a dialog",
    "A side sheet from the left edge: that edge belongs to navigation",
    "A second sheet over the first: close it first",
    "A task in several steps with a Back button: make it a page"
  ],
  "anatomy": [
    {
      "part": "Frame, bottom",
      "measure": "full width. Height fits the content, up to 92 percent of the window"
    },
    {
      "part": "Frame, bottom, full height",
      "measure": "the whole window inside the top and bottom safe areas. For large dialogs and forms longer than the window"
    },
    {
      "part": "Top corners, bottom sheet",
      "measure": "16 px",
      "token": "--radius-2xl"
    },
    {
      "part": "Grabber",
      "measure": "40 by 4 px, centered, 10 px from the top edge. Only when the sheet can be swiped",
      "token": "--surface-control, --radius-full"
    },
    {
      "part": "Bottom padding",
      "measure": "the bottom safe area, at least 12 px",
      "token": "--space-3"
    },
    {
      "part": "Frame, side",
      "measure": "right edge, full window height, 448 px wide. Full width below 640 px"
    },
    {
      "part": "Header, body, footer",
      "measure": "as in a dialog. The close button is 44 px on phones",
      "token": "--space-4, --space-5"
    },
    {
      "part": "Surface",
      "measure": "raised fill and shadow, near opaque. In the dark theme a 1 px top highlight and a 0.5 px ring",
      "token": "--glass-fill-raised, --elevation-3, --glass-highlight, --glass-ring-raised"
    },
    {
      "part": "Scrim",
      "measure": "no blur",
      "token": "--overlay"
    }
  ],
  "variants": [
    {
      "name": "Bottom",
      "use": "Below 640 px, the form every dialog takes. Swipe to close"
    },
    {
      "name": "Bottom, full height",
      "use": "Large dialogs and forms longer than the window"
    },
    {
      "name": "Side",
      "use": "From the right on wide screens, for details and settings read beside the page"
    }
  ],
  "sizes": [
    {
      "name": "Side, 448 px wide"
    },
    {
      "name": "Bottom, content height up to 92 percent of the window"
    },
    {
      "name": "Bottom, full height inside the safe areas"
    }
  ],
  "states": [
    {
      "name": "Opening, bottom",
      "change": "Rises from below the window edge over 300 ms",
      "tokens": [
        "--duration-slow",
        "--ease-soft"
      ]
    },
    {
      "name": "Closing, bottom",
      "change": "Falls back below the edge over 200 ms",
      "tokens": [
        "--duration-base",
        "--ease-standard"
      ]
    },
    {
      "name": "Opening, side",
      "change": "Fades in while traveling 40 px from the right, over 200 ms",
      "tokens": [
        "--duration-base",
        "--ease-soft"
      ]
    },
    {
      "name": "Closing, side",
      "change": "Reverse, over 150 ms",
      "tokens": [
        "--duration-fast",
        "--ease-standard"
      ]
    },
    {
      "name": "Dragging",
      "change": "Follows the finger downward at 70 percent of its travel. Upward travel does nothing. Released short of 90 px and slower than 500 px per second, it springs back"
    },
    {
      "name": "Unsaved entries",
      "change": "A swipe springs back and asks Discard the changes? first"
    },
    {
      "name": "Reduced motion",
      "change": "A fade only",
      "tokens": [
        "--duration-fast"
      ]
    },
    {
      "name": "Scrolled",
      "change": "As in a dialog: the 1 px line under the header or above the footer while content is hidden behind it",
      "tokens": [
        "--border-rule"
      ]
    }
  ],
  "keys": [
    {
      "key": "Tab, Shift+Tab",
      "action": "Move within the sheet, wrapping"
    },
    {
      "key": "Escape",
      "action": "Closes the sheet, or asks first when entries are unsaved"
    },
    {
      "key": "Enter in a single line field",
      "action": "Submits the form"
    }
  ],
  "accessibility": [
    "As a dialog: role dialog, aria-modal true, labeled by its title, focus kept inside and returned on close, the page behind out of reach",
    "The grabber is aria-hidden. The close button, named Close, does the same job",
    "Swipe starts only from the grabber or the header, so scrolling the body never closes the sheet",
    "Controls at least 44 px high on phones"
  ],
  "content": [
    "The title and the buttons follow the rules of a dialog"
  ],
  "tokens": [
    "--overlay",
    "--glass-fill-raised",
    "--glass-highlight",
    "--glass-ring-raised",
    "--elevation-3",
    "--radius-2xl",
    "--radius-full",
    "--surface-control",
    "--space-2",
    "--space-3",
    "--space-4",
    "--space-5",
    "--border-rule",
    "--duration-fast",
    "--duration-base",
    "--duration-slow",
    "--ease-soft",
    "--ease-standard"
  ]
}