@slotted/react 0.0.0-stage → 0.1.0-beta.0

package/dist/docs/popover.json

@@ -0,0 +1,649 @@
+{
+  "family": "popover",
+  "ui": "popover",
+  "binding": "react",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Floating panel anchored to a trigger."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "width": [
+      "auto",
+      "anchor"
+    ],
+    "side": [
+      "top",
+      "bottom",
+      "inline-start",
+      "inline-end",
+      "left",
+      "right"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "strategy": [
+      "absolute",
+      "fixed"
+    ],
+    "arrow": [
+      true,
+      false
+    ],
+    "autoFocus": [
+      true,
+      false
+    ],
+    "closeOnEscape": [
+      true,
+      false
+    ],
+    "closeOnOutsidePress": [
+      true,
+      false
+    ],
+    "flip": [
+      true,
+      false
+    ],
+    "shift": [
+      true,
+      false
+    ],
+    "hideWhenDetached": [
+      true,
+      false
+    ],
+    "portal": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "popover": {
+      "nativeElement": "div",
+      "defaults": {
+        "size": "md",
+        "width": "auto",
+        "side": "bottom",
+        "align": "center",
+        "mount": "active",
+        "strategy": "absolute",
+        "arrow": true,
+        "autoFocus": true,
+        "closeOnEscape": true,
+        "closeOnOutsidePress": true,
+        "flip": true,
+        "shift": true,
+        "hideWhenDetached": false,
+        "portal": true,
+        "disabled": false,
+        "sideOffset": 0,
+        "alignOffset": 0,
+        "collisionPadding": 8,
+        "arrowPadding": 12
+      },
+      "capabilities": [
+        "open",
+        "placement",
+        "size",
+        "appearance",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open"
+      ],
+      "parts": [
+        "root",
+        "content",
+        "header",
+        "title",
+        "description",
+        "body",
+        "footer",
+        "close",
+        "arrow",
+        "focus-guard"
+      ]
+    }
+  },
+  "docs": {
+    "popover": {
+      "imports": {
+        "source": "import {\n  Popover,\n  PopoverAnchor,\n  PopoverArrow,\n  PopoverBody,\n  PopoverClose,\n  PopoverContent,\n  PopoverDefaultsProvider,\n  PopoverDescription,\n  PopoverFooter,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, rendered by PopoverLayer",
+          "required": true,
+          "purpose": "The positioned layer. The positioner writes its position on this element, and this element scales and fades. Its padding is the gap between the trigger and the panel, which is where the arrow stands. It carries data-ui=\"popover\", data-side, data-align, data-size, data-width and data-open."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The panel, with role=\"dialog\" and tabindex=\"-1\". It is named by its title and described by its description when those parts are present. aria-modal is never written, because the popover is not modal."
+        },
+        {
+          "part": "header",
+          "element": "div",
+          "required": false,
+          "purpose": "The row that holds the title, the description and the close button. It keeps its height while the body scrolls."
+        },
+        {
+          "part": "title",
+          "element": "div, or the element render returns",
+          "required": false,
+          "purpose": "The panel’s accessible name. It is a div by default, because only the page knows whether the title belongs in the document outline; render it as a heading when it does."
+        },
+        {
+          "part": "description",
+          "element": "p",
+          "required": false,
+          "purpose": "One line under the title, referenced by the panel through aria-describedby."
+        },
+        {
+          "part": "body",
+          "element": "div",
+          "required": false,
+          "purpose": "The only part that scrolls, bounded by --slotted-positioner-available-height. A scroll shadow at the cut edge shows that there is more content."
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": false,
+          "purpose": "The actions row, separated from the body by a rule and kept under it."
+        },
+        {
+          "part": "close",
+          "element": "button",
+          "required": false,
+          "purpose": "The close button, for a pointer or a touch screen, where there is no Escape key. It draws a cross glyph unless you pass children. With no text of its own it is named by the close message of the language in force; with text, such as Done, the text is its name."
+        },
+        {
+          "part": "arrow",
+          "element": "div",
+          "required": false,
+          "purpose": "A rotated square in the panel’s background and border colours, which continues the panel’s outline towards the anchor. Place it beside PopoverContent inside PopoverLayer, not inside the content: the stylesheet selects it as a direct child of the layer."
+        },
+        {
+          "part": "focus-guard",
+          "element": "span (two of them)",
+          "required": true,
+          "purpose": "Two zero-sized, focusable elements hidden from assistive technology, one on each side of the panel. Tab or Shift+Tab onto either one closes the popover and returns focus to the trigger."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Popover",
+          "description": "Whether the panel is open. Passing it makes the popover controlled for the life of the component; update it from onOpenChange."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Popover",
+          "description": "The open state an uncontrolled popover starts with. It is read once."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Popover",
+          "description": "The maximum width of the layer, which holds the panel and the gap around it: 16rem, 20rem or 24rem, with the inset and the title size to match."
+        },
+        {
+          "name": "width",
+          "type": "'auto' | 'anchor'",
+          "defaultValue": "auto",
+          "appliesTo": "Popover",
+          "description": "auto sizes the panel to its content, up to the width size sets. anchor makes it exactly as wide as the anchor."
+        },
+        {
+          "name": "side",
+          "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "bottom",
+          "appliesTo": "Popover",
+          "description": "The edge of the anchor the panel opens against. inline-start and inline-end follow the writing direction of the layer."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "Popover",
+          "description": "Where the panel sits along the side it opened on."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "Popover",
+          "description": "When the layer exists. active builds it on open and removes it after the exit animation. lazy builds it on the first open and keeps it, for a panel whose content is expensive to build. eager builds it from the start."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "Popover",
+          "description": "The CSS position of the layer. Use fixed for a layer inside an overflow: hidden container, and absolute for one inside a transformed container."
+        },
+        {
+          "name": "arrow",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether PopoverArrow is drawn."
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether focus moves into the popover on open. Focus goes to the panel itself rather than to its first control, so a screen reader announces the panel’s name first and a destructive first control is not focused by default."
+        },
+        {
+          "name": "closeOnEscape",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether Escape closes the popover. Escape reaches only the topmost layer."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean | (target, event) => boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether a press outside the panel closes the popover. A function decides per press, for a panel that has to stay open when the reader presses a toast beside it."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether the panel moves to the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether the panel slides along its side to stay inside the boundary."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Popover",
+          "description": "Whether the panel hides when its anchor scrolls out of view. It is off, unlike Tooltip’s, so a task the reader is halfway through does not disappear when the row behind it scrolls."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "Popover",
+          "description": "Whether the layer is rendered into the shared portal root at the end of the document. The portalled layer keeps the theme, colour scheme, density and direction of the region it was opened from."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Popover",
+          "description": "Whether the popover never opens. It does not disable the trigger; set disabled on the trigger element for that."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<PopoverMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Popover",
+          "description": "Text that replaces the language’s messages for this popover, key by key. close is the close button’s accessible name; an aria-label on PopoverClose takes precedence."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Popover",
+          "description": "Extra distance from the anchor in pixels, added to the standard gap."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "Popover",
+          "description": "Distance in pixels along the alignment axis."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "Popover",
+          "description": "The minimum distance in pixels between the panel and the edge of the boundary."
+        },
+        {
+          "name": "arrowPadding",
+          "type": "number",
+          "defaultValue": "12",
+          "appliesTo": "Popover",
+          "description": "The minimum distance in pixels between the arrow and the panel’s corners, so the arrow stays off the rounded corner."
+        },
+        {
+          "name": "initialFocus",
+          "type": "Element | RefObject | string",
+          "defaultValue": "—",
+          "appliesTo": "Popover",
+          "description": "What takes focus on open instead of the panel, such as a search field. A string is a selector read inside the panel."
+        },
+        {
+          "name": "finalFocus",
+          "type": "Element | RefObject | string",
+          "defaultValue": "—",
+          "appliesTo": "Popover",
+          "description": "What takes focus on close instead of the trigger, for a popover whose trigger is gone by then, such as one that deleted its own row."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Renders the part as the element it returns, with the props it receives spread on it. The trigger uses it to render a Button, and the title uses it to render a heading."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<PopoverHandle>",
+          "defaultValue": "—",
+          "appliesTo": "Popover",
+          "description": "A handle with open(), close() and reposition(), for code that has to open, close or re-measure the popover outside a render."
+        },
+        {
+          "name": "PopoverAnchor",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "composition",
+          "description": "The element the panel is positioned against, when it is not the trigger, such as a table row. It writes no attributes. A press on it counts as a press inside the popover."
+        },
+        {
+          "name": "PopoverDefaultsProvider",
+          "type": "component",
+          "defaultValue": "—",
+          "appliesTo": "application",
+          "description": "Sets any option for every popover inside it. An option set on a popover takes precedence."
+        },
+        {
+          "name": "container",
+          "type": "Element | null",
+          "defaultValue": "document.body",
+          "appliesTo": "PopoverDefaultsProvider",
+          "description": "Where every layer inside the provider is rendered, for an application shell with its own stacking context. It calls setPortalContainer."
+        },
+        {
+          "name": "native props",
+          "type": "ComponentPropsWithRef",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Each part takes the props of its element. An onClick on the trigger runs before the popover’s own handler, and event.preventDefault() stops the popover’s handler."
+        }
+      ],
+      "events": [
+        {
+          "name": "onOpenChange",
+          "payload": "(open: boolean, request: PopoverChangeRequest)",
+          "when": "Before the panel opens or closes, once per change. request.reason is pointer, keyboard, escape, outsidePress, dismiss or programmatic. request.cancel() refuses the change: an uncontrolled popover stays as it is."
+        }
+      ],
+      "accessibility": [
+        "The panel is a non-modal dialog: aria-modal is not written, nothing behind it becomes inert, and the page keeps scrolling. Use Dialog for content that has to block the page.",
+        "The trigger carries aria-expanded, aria-haspopup=\"dialog\", and aria-controls while the panel is in the document. The panel is named by its title through aria-labelledby and described by its description through aria-describedby. A popover without a title has no accessible name until you write aria-label on PopoverContent.",
+        "Focus moves to the panel on open, so a screen reader announces its name before its contents, and returns to the trigger on close. If the reader has moved focus elsewhere on the page, focus stays there. initialFocus and finalFocus name other targets.",
+        "Tab past the last control in the panel, or Shift+Tab before the first, closes the popover and returns focus to the trigger; the next Tab continues down the page. Focus is never trapped in the panel."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-radius",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-easing-standard",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-heading",
+    "--slotted-font-family-sans",
+    "--slotted-font-size-lg",
+    "--slotted-font-size-md",
+    "--slotted-font-size-sm",
+    "--slotted-font-size-xl",
+    "--slotted-font-weight-semibold",
+    "--slotted-line-height-lg",
+    "--slotted-line-height-md",
+    "--slotted-line-height-sm",
+    "--slotted-popover-arrow-size",
+    "--slotted-popover-arrow-tip-radius",
+    "--slotted-popover-border-color",
+    "--slotted-popover-gap",
+    "--slotted-popover-measure",
+    "--slotted-popover-measure-lg",
+    "--slotted-popover-measure-sm",
+    "--slotted-popover-padding-block",
+    "--slotted-popover-padding-block-lg",
+    "--slotted-popover-padding-block-sm",
+    "--slotted-popover-padding-inline",
+    "--slotted-popover-padding-inline-lg",
+    "--slotted-popover-padding-inline-sm",
+    "--slotted-popover-radius",
+    "--slotted-popover-shadow",
+    "--slotted-popover-surface",
+    "--slotted-popover-text",
+    "--slotted-radius-lg",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-shadow-md",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-space-5",
+    "--slotted-space-6",
+    "--slotted-space-7",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "A panel on a button",
+      "note": "Press the button: the panel opens, takes the focus and says its own name. Escape closes it and the focus goes back where it came from.",
+      "language": "tsx",
+      "source": "<Popover>\n  <PopoverTrigger render={(props) => <Button {...props}>Filters</Button>} />\n  <PopoverLayer>\n    <PopoverContent>\n      <PopoverHeader>\n        <PopoverTitle>Filter invoices</PopoverTitle>\n        <PopoverClose />\n      </PopoverHeader>\n      <PopoverBody>Unpaid, overdue and disputed.</PopoverBody>\n    </PopoverContent>\n    <PopoverArrow />\n  </PopoverLayer>\n</Popover>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Three width steps",
+      "note": "Sixteen, twenty and twenty-four rems. The inset and the title step move with the width, and the controls inside move with the density.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  type PopoverSize,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst sizes: PopoverSize[] = ['sm', 'md', 'lg'];\n\nexport default function PopoverSizes() {\n  return (\n    <Inline gap={3} justify=\"center\" wrap=\"wrap\">\n      {sizes.map((size) => (\n        <Popover key={size} size={size}>\n          <PopoverTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {size}\n              </Button>\n            )}\n          />\n          <PopoverLayer>\n            <PopoverContent>\n              <PopoverHeader>\n                <PopoverTitle>Order 10248</PopoverTitle>\n              </PopoverHeader>\n              <PopoverBody>\n                Vins et alcools Chevalier, Reims. Three lines, 440.00 USD, shipped by Federal\n                Shipping on Jul 16.\n              </PopoverBody>\n            </PopoverContent>\n            <PopoverArrow />\n          </PopoverLayer>\n        </Popover>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "width",
+      "title": "As wide as its words, or as wide as the field",
+      "note": "width=\"anchor\" reads the anchor’s measured width, which is the one case Radix publishes a custom property for and the shape a filter panel under a search field needs.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverLayer,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst warehouses = [\n  { name: 'Seattle', stock: '39 units' },\n  { name: 'Tacoma', stock: '120 units' },\n  { name: 'Portland', stock: 'Out of stock' },\n];\n\nexport default function PopoverWidth() {\n  return (\n    <Popover align=\"start\" width=\"anchor\">\n      <PopoverTrigger\n        render={(props) => (\n          <Button {...props} fullWidth tone=\"secondary\" variant=\"outline\">\n            Chai, stock by warehouse\n          </Button>\n        )}\n      />\n      <PopoverLayer>\n        <PopoverContent aria-label=\"Chai stock by warehouse\">\n          <PopoverBody>\n            <DescriptionList>\n              {warehouses.map((warehouse) => (\n                <DescriptionListItem key={warehouse.name}>\n                  <DescriptionListTerm>{warehouse.name}</DescriptionListTerm>\n                  <DescriptionListDescription>{warehouse.stock}</DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </PopoverBody>\n        </PopoverContent>\n        <PopoverArrow />\n      </PopoverLayer>\n    </Popover>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Which edge it takes",
+      "note": "The four physical sides and the two logical ones. Switch the toolbar to rtl: inline-start and inline-end swap, left and right stay where they are.",
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverLayer,\n  type PopoverSide,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst sides: { side: PopoverSide; text: string }[] = [\n  { side: 'top', text: 'Speedy Express collects at 4:00 PM.' },\n  { side: 'bottom', text: 'United Package collects at 5:30 PM.' },\n  { side: 'inline-start', text: 'Federal Shipping collects at 11:00 AM.' },\n  { side: 'inline-end', text: 'Northwind Courier collects at 2:00 PM.' },\n];\n\nexport default function PopoverPlacement() {\n  return (\n    <Inline gap={3} justify=\"center\" wrap=\"wrap\">\n      {sides.map(({ side, text }) => (\n        <Popover key={side} side={side}>\n          <PopoverTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                {side}\n              </Button>\n            )}\n          />\n          <PopoverLayer>\n            <PopoverContent aria-label={`Pickup, ${side}`}>\n              <PopoverBody>{text}</PopoverBody>\n            </PopoverContent>\n            <PopoverArrow />\n          </PopoverLayer>\n        </Popover>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "anchor",
+      "title": "Pointing at something other than the button",
+      "note": "The panel hangs off the whole row and the button only opens it. Nothing is written on the anchor: it is measured and nothing else.",
+      "language": "tsx",
+      "source": "<Popover align=\"end\">\n  <PopoverAnchor>\n    <Row />\n    <PopoverTrigger render={(props) => <Button {...props}>⋯</Button>} />\n  </PopoverAnchor>\n  <PopoverLayer>{/* … */}</PopoverLayer>\n</Popover>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "focus",
+      "title": "Where the keyboard goes",
+      "note": "The first panel takes the focus itself; the second sends it to its search field; the third leaves it on the trigger. Close each one and watch where the focus comes back to.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nconst customers = [\n  'Alfreds Futterkiste',\n  'Ernst Handel',\n  'Frankenversand',\n  'Königlich Essen',\n  'Wartian Herkku',\n];\n\nexport default function PopoverFocus() {\n  const [query, setQuery] = useState('');\n  const matches = customers.filter((name) =>\n    name.toLowerCase().includes(query.trim().toLowerCase()),\n  );\n\n  return (\n    <Popover align=\"start\" initialFocus=\"input\">\n      <PopoverTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Find a customer\n          </Button>\n        )}\n      />\n      <PopoverLayer>\n        <PopoverContent>\n          <PopoverHeader>\n            <PopoverTitle>Find a customer</PopoverTitle>\n          </PopoverHeader>\n          <PopoverBody>\n            <Stack gap={3}>\n              <Field>\n                <FieldLabel>Company name</FieldLabel>\n                <TextField type=\"search\" value={query} onValueChange={setQuery} />\n              </Field>\n              <Text size=\"sm\" tone=\"muted\">\n                {matches.length === 0 ? 'No customer matches.' : matches.join(', ')}\n              </Text>\n            </Stack>\n          </PopoverBody>\n        </PopoverContent>\n        <PopoverArrow />\n      </PopoverLayer>\n    </Popover>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "dismissal",
+      "title": "Every way it closes, and the reason it carries",
+      "note": "Escape, a press outside, the close control, the trigger again. Each one reports a different reason, and a consumer may refuse any of them before anything moves.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverClose,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Text } from '@slotted/react/typography';\n\nexport default function PopoverDismissal() {\n  const [reason, setReason] = useState('not closed yet');\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Popover\n        onOpenChange={(open, request) => {\n          if (!open) setReason(request.reason);\n        }}\n      >\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Delivery note\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Order 10249 delivery note</PopoverTitle>\n              <PopoverClose />\n            </PopoverHeader>\n            <PopoverBody>\n              Leave at the loading dock behind Toms Spezialitäten. The gate closes at 6:00 PM.\n            </PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n      <Text size=\"sm\" tone=\"muted\">\n        Last closed by: {reason}\n      </Text>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "scrolling",
+      "title": "More content than room",
+      "note": "The body is the only part that scrolls, bounded by the height the engine says is left. The title and the actions keep theirs, and the fade at the cut says there is more.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverClose,\n  PopoverContent,\n  PopoverFooter,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Stack } from '@slotted/react/stack';\nimport { Text } from '@slotted/react/typography';\n\nconst activity = [\n  'Jul 4, 9:12 AM. Order placed by Vins et alcools Chevalier.',\n  'Jul 4, 9:40 AM. Payment authorised, 440.00 USD.',\n  'Jul 5, 8:05 AM. Allocated to the Seattle warehouse.',\n  'Jul 5, 2:30 PM. Picked by Nancy Davolio.',\n  'Jul 6, 10:15 AM. Packed in two cartons, 14.2 kg.',\n  'Jul 8, 11:00 AM. Customs documents filed for France.',\n  'Jul 16, 4:00 PM. Collected by Federal Shipping.',\n  'Jul 18, 7:20 AM. Arrived at the Le Havre hub.',\n  'Jul 19, 9:45 AM. Out for delivery in Reims.',\n  'Jul 19, 3:10 PM. Delivered, signed by P. Henriot.',\n];\n\nexport default function PopoverScrolling() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Order 10248 activity\n          </Button>\n        )}\n      />\n      <PopoverLayer>\n        <PopoverContent>\n          <PopoverHeader>\n            <PopoverTitle>Order 10248 activity</PopoverTitle>\n            <PopoverClose />\n          </PopoverHeader>\n          <PopoverBody>\n            <Stack gap={3}>\n              {activity.map((entry) => (\n                <Text key={entry} size=\"sm\">\n                  {entry}\n                </Text>\n              ))}\n            </Stack>\n          </PopoverBody>\n          <PopoverFooter>\n            <Button size=\"sm\" onClick={() => setOpen(false)}>\n              Done\n            </Button>\n          </PopoverFooter>\n        </PopoverContent>\n        <PopoverArrow />\n      </PopoverLayer>\n    </Popover>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "A panel holding a real form",
+      "note": "Fields, a footer of actions and a close control. The controls inside are the consumer’s own and reach their form untouched: the family holds no value of theirs.",
+      "language": "tsx",
+      "source": "<PopoverBody>\n  <Field>\n    <FieldLabel>Amount</FieldLabel>\n    <CurrencyField name=\"amount\" />\n  </Field>\n</PopoverBody>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "nested",
+      "title": "A tooltip on a control inside the panel",
+      "note": "Two layers at once. The tooltip is a later layer, so it draws above the panel and Escape reaches it first; the panel closes on the second Escape and not before.",
+      "language": "tsx",
+      "source": "<PopoverFooter>\n  <Tooltip describes=\"label\">\n    <TooltipTrigger render={(props) => <Button {...props}>⌫</Button>} />\n    <TooltipLayer>\n      <TooltipContent>Clear the filters</TooltipContent>\n    </TooltipLayer>\n  </Tooltip>\n</PopoverFooter>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "What the keyboard does",
+      "note": "Enter or Space opens it. Tab walks the panel and, past the last control, closes it and returns to the trigger — one extra Tab, and the reading order intact.",
+      "language": "tsx",
+      "source": "<Popover onOpenChange={(open, request) => report(request.reason)}>\n  <PopoverTrigger render={(props) => <Button {...props}>Tab through me</Button>} />\n  <PopoverLayer>{/* … */}</PopoverLayer>\n</Popover>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "alignment",
+      "title": "alignment.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  type PopoverAlign,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverLayer,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst alignments: PopoverAlign[] = ['start', 'center', 'end'];\n\nexport default function PopoverAlignment() {\n  return (\n    <Inline gap={3} justify=\"center\" wrap=\"wrap\">\n      {alignments.map((align) => (\n        <Popover key={align} align={align}>\n          <PopoverTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Align {align}\n              </Button>\n            )}\n          />\n          <PopoverLayer>\n            <PopoverContent aria-label={`Restock, aligned ${align}`}>\n              <PopoverBody>Restock 40 units of Chang from Exotic Liquids by Oct 14.</PopoverBody>\n            </PopoverContent>\n            <PopoverArrow />\n          </PopoverLayer>\n        </Popover>\n      ))}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "arrow-and-offset",
+      "title": "arrow-and-offset.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverLayer,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nexport default function PopoverArrowAndOffset() {\n  return (\n    <Inline gap={3} justify=\"center\" wrap=\"wrap\">\n      <Popover>\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              With arrow\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent aria-label=\"Pickup window\">\n            <PopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n      <Popover arrow={false} sideOffset={8}>\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              No arrow, 8px further\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent aria-label=\"Pickup window\">\n            <PopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverClose,\n  PopoverContent,\n  PopoverDescription,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst stock = [\n  { term: 'On hand', value: '39 units' },\n  { term: 'Reserved', value: '12 units' },\n  { term: 'Reorder point', value: '25 units' },\n  { term: 'Next delivery', value: 'Oct 14, Exotic Liquids' },\n];\n\nexport default function PopoverBasic() {\n  return (\n    <Popover>\n      <PopoverTrigger\n        render={(props) => (\n          <Button {...props} tone=\"secondary\" variant=\"outline\">\n            Chai stock\n          </Button>\n        )}\n      />\n      <PopoverLayer>\n        <PopoverContent>\n          <PopoverHeader>\n            <PopoverTitle>Chai</PopoverTitle>\n            <PopoverDescription>SKU NW-1001, Seattle warehouse</PopoverDescription>\n            <PopoverClose />\n          </PopoverHeader>\n          <PopoverBody>\n            <DescriptionList>\n              {stock.map((row) => (\n                <DescriptionListItem key={row.term}>\n                  <DescriptionListTerm>{row.term}</DescriptionListTerm>\n                  <DescriptionListDescription>{row.value}</DescriptionListDescription>\n                </DescriptionListItem>\n              ))}\n            </DescriptionList>\n          </PopoverBody>\n        </PopoverContent>\n        <PopoverArrow />\n      </PopoverLayer>\n    </Popover>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Radio, RadioGroup } from '@slotted/react/radio-group';\nimport { Text } from '@slotted/react/typography';\n\nconst pickers = ['Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock'];\n\nexport default function PopoverControlled() {\n  const [open, setOpen] = useState(false);\n  const [picker, setPicker] = useState('Nancy Davolio');\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text size=\"sm\">Order 10251, picked by {picker}</Text>\n      <Popover open={open} onOpenChange={setOpen} align=\"end\">\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n              Reassign\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Picker for order 10251</PopoverTitle>\n            </PopoverHeader>\n            <PopoverBody>\n              <RadioGroup\n                aria-label=\"Picker\"\n                value={picker}\n                onValueChange={(next) => {\n                  setPicker(next);\n                  setOpen(false);\n                }}\n              >\n                {pickers.map((name) => (\n                  <Radio key={name} value={name}>\n                    {name}\n                  </Radio>\n                ))}\n              </RadioGroup>\n            </PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverDefaultsProvider,\n  PopoverLayer,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nconst terms = [\n  { label: 'Net 30', text: 'Payment is due 30 days after the invoice date.' },\n  { label: 'Net 60', text: 'Payment is due 60 days after the invoice date.' },\n];\n\nexport default function PopoverDefaults() {\n  return (\n    <PopoverDefaultsProvider arrow={false} size=\"sm\">\n      <Inline gap={3} justify=\"center\" wrap=\"wrap\">\n        {terms.map((term) => (\n          <Popover key={term.label}>\n            <PopoverTrigger\n              render={(props) => (\n                <Button {...props} tone=\"secondary\" variant=\"outline\">\n                  {term.label}\n                </Button>\n              )}\n            />\n            <PopoverLayer>\n              <PopoverContent aria-label={term.label}>\n                <PopoverBody>{term.text}</PopoverBody>\n              </PopoverContent>\n              <PopoverArrow />\n            </PopoverLayer>\n          </Popover>\n        ))}\n        <Popover arrow>\n          <PopoverTrigger\n            render={(props) => (\n              <Button {...props} tone=\"secondary\" variant=\"outline\">\n                Cash in advance\n              </Button>\n            )}\n          />\n          <PopoverLayer>\n            <PopoverContent aria-label=\"Cash in advance\">\n              <PopoverBody>The order ships once the payment has cleared.</PopoverBody>\n            </PopoverContent>\n            <PopoverArrow />\n          </PopoverLayer>\n        </Popover>\n      </Inline>\n    </PopoverDefaultsProvider>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Field, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { NumberField } from '@slotted/react/number-field';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverDescription,\n  PopoverFooter,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nexport default function PopoverForm() {\n  const [open, setOpen] = useState(false);\n  const [onHand, setOnHand] = useState(39);\n  const [count, setCount] = useState<number | null>(39);\n  const [note, setNote] = useState('');\n  const dirty = count !== onHand || note !== '';\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Text size=\"sm\">Chai: {onHand} units on hand</Text>\n      <Popover\n        initialFocus=\"input\"\n        open={open}\n        onOpenChange={(next, request) => {\n          if (!next && request.reason === 'outsidePress' && dirty) {\n            request.cancel();\n            return;\n          }\n          if (next) {\n            setCount(onHand);\n            setNote('');\n          }\n          setOpen(next);\n        }}\n      >\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"outline\">\n              Adjust stock\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Adjust Chai stock</PopoverTitle>\n              <PopoverDescription>Seattle warehouse, bin A-14</PopoverDescription>\n            </PopoverHeader>\n            <PopoverBody>\n              <Stack gap={3}>\n                <Field>\n                  <FieldLabel>Counted quantity</FieldLabel>\n                  <NumberField end=\"units\" min={0} value={count} onValueChange={setCount} />\n                </Field>\n                <Field>\n                  <FieldLabel>Reason</FieldLabel>\n                  <TextField value={note} onValueChange={setNote} />\n                </Field>\n              </Stack>\n            </PopoverBody>\n            <PopoverFooter>\n              <Button size=\"sm\" tone=\"secondary\" variant=\"ghost\" onClick={() => setOpen(false)}>\n                Cancel\n              </Button>\n              <Button\n                size=\"sm\"\n                disabled={count === null}\n                onClick={() => {\n                  if (count !== null) setOnHand(count);\n                  setOpen(false);\n                }}\n              >\n                Save\n              </Button>\n            </PopoverFooter>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "narrow",
+      "title": "narrow.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\n\nexport default function PopoverNarrow() {\n  return (\n    <Inline justify=\"end\">\n      <Popover align=\"start\" size=\"lg\">\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} tone=\"secondary\" variant=\"outline\">\n              Volume pricing\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Volume pricing for Chai</PopoverTitle>\n            </PopoverHeader>\n            <PopoverBody>\n              18.00 USD a case up to 24 cases, 16.20 USD from 25 cases, and 15.30 USD from 100\n              cases. Prices apply to orders shipped from the Seattle warehouse.\n            </PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "table-row",
+      "title": "table-row.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Button } from '@slotted/react/button';\nimport {\n  DescriptionList,\n  DescriptionListDescription,\n  DescriptionListItem,\n  DescriptionListTerm,\n} from '@slotted/react/description-list';\nimport {\n  Popover,\n  PopoverAnchor,\n  PopoverArrow,\n  PopoverBody,\n  PopoverClose,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableColumnHeader,\n  TableContent,\n  TableHead,\n  TableRow,\n  TableRowHeader,\n} from '@slotted/react/table';\n\nconst orders = [\n  {\n    id: '10248',\n    customer: 'Vins et alcools Chevalier',\n    carrier: 'Federal Shipping',\n    tracking: 'FS-4471-0921',\n    shipped: 'Jul 16',\n  },\n  {\n    id: '10249',\n    customer: 'Toms Spezialitäten',\n    carrier: 'Speedy Express',\n    tracking: 'SE-2210-3384',\n    shipped: 'Jul 10',\n  },\n  {\n    id: '10250',\n    customer: 'Hanari Carnes',\n    carrier: 'United Package',\n    tracking: 'UP-9035-1172',\n    shipped: 'Jul 12',\n  },\n];\n\nexport default function PopoverTableRow() {\n  return (\n    <Table columns={3}>\n      <TableContent>\n        <TableCaption>Shipped orders</TableCaption>\n        <TableHead>\n          <TableRow>\n            <TableColumnHeader>Order</TableColumnHeader>\n            <TableColumnHeader>Customer</TableColumnHeader>\n            <TableColumnHeader>Shipment</TableColumnHeader>\n          </TableRow>\n        </TableHead>\n        <TableBody>\n          {orders.map((order) => (\n            <Popover key={order.id} align=\"end\">\n              <PopoverAnchor\n                render={(props) => (\n                  <TableRow {...props} value={order.id}>\n                    <TableRowHeader>{order.id}</TableRowHeader>\n                    <TableCell>{order.customer}</TableCell>\n                    <TableCell>\n                      <PopoverTrigger\n                        render={(triggerProps) => (\n                          <Button {...triggerProps} size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n                            Tracking\n                          </Button>\n                        )}\n                      />\n                    </TableCell>\n                  </TableRow>\n                )}\n              />\n              <PopoverLayer>\n                <PopoverContent>\n                  <PopoverHeader>\n                    <PopoverTitle>Order {order.id} shipment</PopoverTitle>\n                    <PopoverClose />\n                  </PopoverHeader>\n                  <PopoverBody>\n                    <DescriptionList>\n                      <DescriptionListItem>\n                        <DescriptionListTerm>Carrier</DescriptionListTerm>\n                        <DescriptionListDescription>{order.carrier}</DescriptionListDescription>\n                      </DescriptionListItem>\n                      <DescriptionListItem>\n                        <DescriptionListTerm>Tracking</DescriptionListTerm>\n                        <DescriptionListDescription>{order.tracking}</DescriptionListDescription>\n                      </DescriptionListItem>\n                      <DescriptionListItem>\n                        <DescriptionListTerm>Shipped</DescriptionListTerm>\n                        <DescriptionListDescription>{order.shipped}</DescriptionListDescription>\n                      </DescriptionListItem>\n                    </DescriptionList>\n                  </PopoverBody>\n                </PopoverContent>\n                <PopoverArrow />\n              </PopoverLayer>\n            </Popover>\n          ))}\n        </TableBody>\n      </TableContent>\n    </Table>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "toolbar",
+      "title": "toolbar.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport { Checkbox } from '@slotted/react/checkbox';\nimport { CheckboxGroup } from '@slotted/react/checkbox-group';\nimport {\n  Popover,\n  PopoverArrow,\n  PopoverBody,\n  PopoverContent,\n  PopoverHeader,\n  PopoverLayer,\n  PopoverTitle,\n  PopoverTrigger,\n} from '@slotted/react/popover';\nimport { Toolbar, ToolbarSpacer } from '@slotted/react/toolbar';\nimport { Text } from '@slotted/react/typography';\n\nconst statuses = [\n  { value: 'pending', label: 'Pending', orders: 14 },\n  { value: 'shipped', label: 'Shipped', orders: 27 },\n  { value: 'delivered', label: 'Delivered', orders: 112 },\n  { value: 'returned', label: 'Returned', orders: 3 },\n];\n\nexport default function PopoverToolbar() {\n  const [shown, setShown] = useState<readonly string[]>(['pending', 'shipped']);\n  const count = statuses\n    .filter((status) => shown.includes(status.value))\n    .reduce((sum, status) => sum + status.orders, 0);\n\n  return (\n    <Toolbar aria-label=\"Orders\">\n      <Popover align=\"start\">\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n              Status\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Show orders that are</PopoverTitle>\n            </PopoverHeader>\n            <PopoverBody>\n              <CheckboxGroup aria-label=\"Status\" value={shown} onValueChange={setShown}>\n                {statuses.map((status) => (\n                  <Checkbox key={status.value} value={status.value}>\n                    {status.label}\n                  </Checkbox>\n                ))}\n              </CheckboxGroup>\n            </PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n      <Popover align=\"start\">\n        <PopoverTrigger\n          render={(props) => (\n            <Button {...props} size=\"sm\" tone=\"secondary\" variant=\"ghost\">\n              Columns\n            </Button>\n          )}\n        />\n        <PopoverLayer>\n          <PopoverContent>\n            <PopoverHeader>\n              <PopoverTitle>Columns</PopoverTitle>\n            </PopoverHeader>\n            <PopoverBody>\n              <CheckboxGroup aria-label=\"Columns\" defaultValue={['customer', 'total']}>\n                <Checkbox value=\"customer\">Customer</Checkbox>\n                <Checkbox value=\"ship-via\">Ship via</Checkbox>\n                <Checkbox value=\"total\">Total</Checkbox>\n              </CheckboxGroup>\n            </PopoverBody>\n          </PopoverContent>\n          <PopoverArrow />\n        </PopoverLayer>\n      </Popover>\n      <ToolbarSpacer />\n      <Text size=\"sm\" tone=\"muted\">\n        {count} orders\n      </Text>\n    </Toolbar>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}