@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/popover.json

@@ -0,0 +1,656 @@
+{
+  "family": "popover",
+  "ui": "popover",
+  "binding": "angular",
+  "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  providePopoverDefaults,\n  SlPopover,\n  SlPopoverAnchor,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverClose,\n  SlPopoverContent,\n  SlPopoverDescription,\n  SlPopoverFooter,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';",
+        "selector": "[slPopover] on an ng-container, [slPopoverTrigger] on the control, ng-template[slPopoverLayer], [slPopoverContent], and one directive per part inside it",
+        "exportAs": "slPopover"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div, built by ng-template[slPopoverLayer]",
+          "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": "the element carrying slPopoverContent",
+          "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": "the element carrying slPopoverHeader",
+          "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": "the element carrying slPopoverTitle",
+          "required": false,
+          "purpose": "The panel’s accessible name. Write it on a div, or on a heading when the title belongs in the document outline."
+        },
+        {
+          "part": "description",
+          "element": "the element carrying slPopoverDescription",
+          "required": false,
+          "purpose": "One line under the title, referenced by the panel through aria-describedby."
+        },
+        {
+          "part": "body",
+          "element": "the element carrying slPopoverBody",
+          "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": "the element carrying slPopoverFooter",
+          "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 project content of your own. 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": "the element carrying slPopoverArrow",
+          "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 the content inside ng-template[slPopoverLayer], not inside the content: the stylesheet selects it as a direct child of the layer. While arrow is false the layer leaves it out."
+        },
+        {
+          "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": "false",
+          "appliesTo": "slPopover",
+          "description": "Whether the panel is open. Bind [(open)] to a signal to control it."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slPopover",
+          "description": "The open state an uncontrolled popover starts with. It is read once, on init."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "slPopover",
+          "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": "slPopover",
+          "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": "slPopover",
+          "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": "slPopover",
+          "description": "Where the panel sits along the side it opened on."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "slPopover",
+          "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": "slPopover",
+          "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": "slPopover",
+          "description": "Whether the slPopoverArrow element is drawn."
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slPopover",
+          "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": "slPopover",
+          "description": "Whether Escape closes the popover. Escape reaches only the topmost layer."
+        },
+        {
+          "name": "closeOnOutsidePress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slPopover",
+          "description": "Whether a press outside the panel closes the popover."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slPopover",
+          "description": "Whether the panel moves to the opposite side when it does not fit."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slPopover",
+          "description": "Whether the panel slides along its side to stay inside the boundary."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slPopover",
+          "description": "Whether the panel hides when its anchor scrolls out of view. It is off, unlike slTooltip’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": "slPopover",
+          "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": "slPopover",
+          "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": "slPopover",
+          "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 written on slPopoverClose takes precedence."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slPopover",
+          "description": "Extra distance from the anchor in pixels, added to the standard gap."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slPopover",
+          "description": "Distance in pixels along the alignment axis."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "slPopover",
+          "description": "The minimum distance in pixels between the panel and the edge of the boundary."
+        },
+        {
+          "name": "arrowPadding",
+          "type": "number",
+          "defaultValue": "12",
+          "appliesTo": "slPopover",
+          "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 | string",
+          "defaultValue": "—",
+          "appliesTo": "slPopover",
+          "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 | string",
+          "defaultValue": "—",
+          "appliesTo": "slPopover",
+          "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": "the directive",
+          "type": "attribute",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "Every part is a directive on your own element, so the title can be a heading and the trigger can be any slButton. There is no render input."
+        },
+        {
+          "name": "exportAs",
+          "type": "slPopover",
+          "defaultValue": "—",
+          "appliesTo": "[slPopover]",
+          "description": "A template reference to the popover, with show(), hide() and toggle(next, reason), for code that has to open or close it outside a binding."
+        },
+        {
+          "name": "exportAs",
+          "type": "slPopoverLayer",
+          "defaultValue": "—",
+          "appliesTo": "ng-template[slPopoverLayer]",
+          "description": "A template reference to the layer, with reposition(), which measures and places the layer again."
+        },
+        {
+          "name": "slPopoverAnchor",
+          "type": "directive",
+          "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": "providePopoverDefaults",
+          "type": "Provider",
+          "defaultValue": "—",
+          "appliesTo": "application or component",
+          "description": "Sets any option for every popover under the injector. An option set on a popover takes precedence, and an aria-label written on slPopoverClose takes precedence over both."
+        },
+        {
+          "name": "native attributes",
+          "type": "host",
+          "defaultValue": "—",
+          "appliesTo": "every part",
+          "description": "A part writes only the attributes it owns. A (click) listener on the trigger runs beside the popover’s own, and event.preventDefault() does not stop the popover’s."
+        }
+      ],
+      "events": [
+        {
+          "name": "openChange",
+          "payload": "boolean",
+          "when": "After the open state changes. It is the change half of [(open)]."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "PopoverChangeRequest",
+          "when": "Before the panel opens or closes, once per change. reason is pointer, keyboard, escape, outsidePress, dismiss or programmatic. cancel() refuses the change, and openChange is not emitted."
+        }
+      ],
+      "accessibility": [
+        "The panel is a non-modal dialog: aria-modal is not written, nothing behind it becomes inert, and the page keeps scrolling. Use slDialog 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 the slPopoverContent element.",
+        "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": "html",
+      "source": "<ng-container slPopover>\n  <button slButton slPopoverTrigger type=\"button\">Filters</button>\n  <ng-template slPopoverLayer>\n    <div slPopoverContent>\n      <div slPopoverHeader>\n        <div slPopoverTitle>Filter invoices</div>\n        <button slPopoverClose></button>\n      </div>\n      <div slPopoverBody>Unpaid, overdue and disputed.</div>\n    </div>\n    <div slPopoverArrow></div>\n  </ng-template>\n</ng-container>\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport type { PopoverSize } from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-sizes',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" justify=\"center\" wrap=\"wrap\">\n      @for (size of sizes; track size) {\n        <ng-container slPopover [size]=\"size\">\n          <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>{{ size }}</button>\n          <ng-template slPopoverLayer>\n            <div slPopoverContent>\n              <div slPopoverHeader>\n                <div slPopoverTitle>Order 10248</div>\n              </div>\n              <div slPopoverBody>\n                Vins et alcools Chevalier, Reims. Three lines, 440.00 USD, shipped by Federal\n                Shipping on Jul 16.\n              </div>\n            </div>\n            <div slPopoverArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n    </div>\n  `,\n})\nexport class PopoverSizes {\n  readonly sizes: PopoverSize[] = ['sm', 'md', 'lg'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "width",
+      "title": "As wide as its words, or as wide as the field",
+      "note": "width=\"anchor\" reads the anchor 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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverLayer,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-width',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverLayer,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <ng-container slPopover align=\"start\" width=\"anchor\">\n      <button slButton fullWidth tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n        Chai, stock by warehouse\n      </button>\n      <ng-template slPopoverLayer>\n        <div slPopoverContent aria-label=\"Chai stock by warehouse\">\n          <div slPopoverBody>\n            <div slDescriptionList>\n              @for (warehouse of warehouses; track warehouse.name) {\n                <div slDescriptionListItem>\n                  <dt slDescriptionListTerm>{{ warehouse.name }}</dt>\n                  <dd slDescriptionListDescription>{{ warehouse.stock }}</dd>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div slPopoverArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class PopoverWidth {\n  readonly warehouses = [\n    { name: 'Seattle', stock: '39 units' },\n    { name: 'Tacoma', stock: '120 units' },\n    { name: 'Portland', stock: 'Out of stock' },\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": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverLayer,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport type { PopoverSide } from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-placement',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverLayer,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" justify=\"center\" wrap=\"wrap\">\n      @for (item of sides; track item.side) {\n        <ng-container slPopover [side]=\"item.side\">\n          <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n            {{ item.side }}\n          </button>\n          <ng-template slPopoverLayer>\n            <div slPopoverContent [attr.aria-label]=\"'Pickup, ' + item.side\">\n              <div slPopoverBody>{{ item.text }}</div>\n            </div>\n            <div slPopoverArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n    </div>\n  `,\n})\nexport class PopoverPlacement {\n  readonly 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}\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": "html",
+      "source": "<ng-container slPopover align=\"end\">\n  <div slPopoverAnchor>\n    <span>Invoice 2026-014</span>\n    <button slButton slPopoverTrigger type=\"button\">More</button>\n  </div>\n  <ng-template slPopoverLayer></ng-template>\n</ng-container>\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": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-focus',\n  imports: [\n    SlButton,\n    SlField,\n    SlFieldLabel,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <ng-container slPopover align=\"start\" initialFocus=\"input\">\n      <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>Find a customer</button>\n      <ng-template slPopoverLayer>\n        <div slPopoverContent>\n          <div slPopoverHeader>\n            <div slPopoverTitle>Find a customer</div>\n          </div>\n          <div slPopoverBody>\n            <div slStack [gap]=\"3\">\n              <div slField>\n                <label slFieldLabel>Company name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    type=\"search\"\n                    [value]=\"query()\"\n                    (valueChange)=\"query.set($event.value)\"\n                  />\n                </div>\n              </div>\n              <span slText size=\"sm\" tone=\"muted\">{{ summary() }}</span>\n            </div>\n          </div>\n        </div>\n        <div slPopoverArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class PopoverFocus {\n  readonly customers = [\n    'Alfreds Futterkiste',\n    'Ernst Handel',\n    'Frankenversand',\n    'Königlich Essen',\n    'Wartian Herkku',\n  ];\n  readonly query = signal('');\n  readonly summary = computed(() => {\n    const query = this.query().trim().toLowerCase();\n    const matches = this.customers.filter((name) => name.toLowerCase().includes(query));\n    return matches.length === 0 ? 'No customer matches.' : matches.join(', ');\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverClose,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n  type PopoverChangeRequest,\n} from '@slotted/angular/popover';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-dismissal',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverClose,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <ng-container slPopover (openChangeRequest)=\"record($event)\">\n        <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>Delivery note</button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Order 10249 delivery note</div>\n              <button slPopoverClose></button>\n            </div>\n            <div slPopoverBody>\n              Leave at the loading dock behind Toms Spezialitäten. The gate closes at 6:00 PM.\n            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n      <span slText size=\"sm\" tone=\"muted\">Last closed by: {{ reason() }}</span>\n    </div>\n  `,\n})\nexport class PopoverDismissal {\n  readonly reason = signal('not closed yet');\n\n  record(request: PopoverChangeRequest): void {\n    if (!request.value) this.reason.set(request.reason);\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": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverClose,\n  SlPopoverContent,\n  SlPopoverFooter,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-scrolling',\n  imports: [\n    SlButton,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverClose,\n    SlPopoverContent,\n    SlPopoverFooter,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlStack,\n    SlText,\n  ],\n  template: `\n    <ng-container slPopover [(open)]=\"open\">\n      <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n        Order 10248 activity\n      </button>\n      <ng-template slPopoverLayer>\n        <div slPopoverContent>\n          <div slPopoverHeader>\n            <div slPopoverTitle>Order 10248 activity</div>\n            <button slPopoverClose></button>\n          </div>\n          <div slPopoverBody>\n            <div slStack [gap]=\"3\">\n              @for (entry of activity; track entry) {\n                <span slText size=\"sm\">{{ entry }}</span>\n              }\n            </div>\n          </div>\n          <div slPopoverFooter>\n            <button slButton size=\"sm\" (click)=\"open.set(false)\">Done</button>\n          </div>\n        </div>\n        <div slPopoverArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class PopoverScrolling {\n  readonly open = signal(false);\n  readonly 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}\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 own and reach their form untouched: the family holds no value of theirs.",
+      "language": "html",
+      "source": "<div slPopoverBody>\n  <div slField>\n    <label slFieldLabel>Amount</label>\n    <input slFieldControl slTextFieldInput />\n  </div>\n</div>\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": "html",
+      "source": "<div slPopoverFooter>\n  <ng-container slTooltip describes=\"label\">\n    <button slButton slTooltipTrigger type=\"button\">Clear</button>\n    <ng-template slTooltipLayer>\n      <div slTooltipContent>Clear the filters</div>\n    </ng-template>\n  </ng-container>\n</div>\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": "html",
+      "source": "<ng-container slPopover (openChangeRequest)=\"reason = $event.reason\">\n  <button slButton slPopoverTrigger type=\"button\">Tab through me</button>\n  <ng-template slPopoverLayer></ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "alignment",
+      "title": "alignment.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverLayer,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport type { PopoverAlign } from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-alignment',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverLayer,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" justify=\"center\" wrap=\"wrap\">\n      @for (align of alignments; track align) {\n        <ng-container slPopover [align]=\"align\">\n          <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n            Align {{ align }}\n          </button>\n          <ng-template slPopoverLayer>\n            <div slPopoverContent [attr.aria-label]=\"'Restock, aligned ' + align\">\n              <div slPopoverBody>Restock 40 units of Chang from Exotic Liquids by Oct 14.</div>\n            </div>\n            <div slPopoverArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n    </div>\n  `,\n})\nexport class PopoverAlignment {\n  readonly alignments: PopoverAlign[] = ['start', 'center', 'end'];\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "arrow-and-offset",
+      "title": "arrow-and-offset.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverLayer,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-arrow-and-offset',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverLayer,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" justify=\"center\" wrap=\"wrap\">\n      <ng-container slPopover>\n        <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>With arrow</button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent aria-label=\"Pickup window\">\n            <div slPopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slPopover [arrow]=\"false\" [sideOffset]=\"8\">\n        <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n          No arrow, 8px further\n        </button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent aria-label=\"Pickup window\">\n            <div slPopoverBody>Speedy Express collects between 3:30 and 4:00 PM.</div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class PopoverArrowAndOffset {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverClose,\n  SlPopoverContent,\n  SlPopoverDescription,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-basic',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverClose,\n    SlPopoverContent,\n    SlPopoverDescription,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <ng-container slPopover>\n      <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>Chai stock</button>\n      <ng-template slPopoverLayer>\n        <div slPopoverContent>\n          <div slPopoverHeader>\n            <div slPopoverTitle>Chai</div>\n            <p slPopoverDescription>SKU NW-1001, Seattle warehouse</p>\n            <button slPopoverClose></button>\n          </div>\n          <div slPopoverBody>\n            <div slDescriptionList>\n              @for (row of stock; track row.term) {\n                <div slDescriptionListItem>\n                  <dt slDescriptionListTerm>{{ row.term }}</dt>\n                  <dd slDescriptionListDescription>{{ row.value }}</dd>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <div slPopoverArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class PopoverBasic {\n  readonly 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}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport { SlRadio, SlRadioGroup } from '@slotted/angular/radio-group';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-controlled',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlRadio,\n    SlRadioGroup,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText size=\"sm\">Order 10251, picked by {{ picker() }}</span>\n      <ng-container slPopover [(open)]=\"open\" align=\"end\">\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n          Reassign\n        </button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Picker for order 10251</div>\n            </div>\n            <div slPopoverBody>\n              <div\n                slRadioGroup\n                aria-label=\"Picker\"\n                [value]=\"picker()\"\n                (valueChange)=\"choose($event.value)\"\n              >\n                @for (name of pickers; track name) {\n                  <div slRadio [value]=\"name\">{{ name }}</div>\n                }\n              </div>\n            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class PopoverControlled {\n  readonly pickers = ['Nancy Davolio', 'Andrew Fuller', 'Janet Leverling', 'Margaret Peacock'];\n  readonly open = signal(false);\n  readonly picker = signal('Nancy Davolio');\n\n  choose(name: string | undefined): void {\n    if (name !== undefined) this.picker.set(name);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  providePopoverDefaults,\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverLayer,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-defaults',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverLayer,\n    SlPopoverTrigger,\n  ],\n  providers: [providePopoverDefaults({ arrow: false, size: 'sm' })],\n  template: `\n    <div slInline [gap]=\"3\" justify=\"center\" wrap=\"wrap\">\n      @for (term of terms; track term.label) {\n        <ng-container slPopover>\n          <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n            {{ term.label }}\n          </button>\n          <ng-template slPopoverLayer>\n            <div slPopoverContent [attr.aria-label]=\"term.label\">\n              <div slPopoverBody>{{ term.text }}</div>\n            </div>\n            <div slPopoverArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n      <ng-container slPopover [arrow]=\"true\">\n        <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n          Cash in advance\n        </button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent aria-label=\"Cash in advance\">\n            <div slPopoverBody>The order ships once the payment has cleared.</div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class PopoverDefaults {\n  readonly 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}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlField, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlNumberField, SlNumberFieldEnd, SlNumberFieldInput } from '@slotted/angular/number-field';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverDescription,\n  SlPopoverFooter,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n  type PopoverChangeRequest,\n} from '@slotted/angular/popover';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-form',\n  imports: [\n    SlButton,\n    SlField,\n    SlFieldLabel,\n    SlInline,\n    SlNumberField,\n    SlNumberFieldEnd,\n    SlNumberFieldInput,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverDescription,\n    SlPopoverFooter,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <span slText size=\"sm\">Chai: {{ onHand() }} units on hand</span>\n      <ng-container\n        slPopover\n        initialFocus=\"input\"\n        [(open)]=\"open\"\n        (openChangeRequest)=\"guard($event)\"\n      >\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"outline\" slPopoverTrigger>\n          Adjust stock\n        </button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Adjust Chai stock</div>\n              <p slPopoverDescription>Seattle warehouse, bin A-14</p>\n            </div>\n            <div slPopoverBody>\n              <div slStack [gap]=\"3\">\n                <div slField>\n                  <label slFieldLabel>Counted quantity</label>\n                  <div slNumberField>\n                    <input\n                      slNumberFieldInput\n                      min=\"0\"\n                      [value]=\"count()\"\n                      (valueChange)=\"count.set($event.value)\"\n                    />\n                    <span slNumberFieldEnd>units</span>\n                  </div>\n                </div>\n                <div slField>\n                  <label slFieldLabel>Reason</label>\n                  <div slTextField>\n                    <input\n                      slTextFieldInput\n                      [value]=\"note()\"\n                      (valueChange)=\"note.set($event.value)\"\n                    />\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div slPopoverFooter>\n              <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" (click)=\"open.set(false)\">\n                Cancel\n              </button>\n              <button slButton size=\"sm\" [disabled]=\"count() === null\" (click)=\"save()\">\n                Save\n              </button>\n            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class PopoverForm {\n  readonly open = signal(false);\n  readonly onHand = signal(39);\n  readonly count = signal<number | null>(39);\n  readonly note = signal('');\n  readonly dirty = computed(() => this.count() !== this.onHand() || this.note() !== '');\n\n  guard(request: PopoverChangeRequest): void {\n    if (!request.value && request.reason === 'outsidePress' && this.dirty()) {\n      request.cancel();\n      return;\n    }\n    if (request.value) {\n      this.count.set(this.onHand());\n      this.note.set('');\n    }\n  }\n\n  save(): void {\n    const count = this.count();\n    if (count !== null) this.onHand.set(count);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "narrow",
+      "title": "narrow.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\n\n@Component({\n  selector: 'app-popover-narrow',\n  imports: [\n    SlButton,\n    SlInline,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n  ],\n  template: `\n    <div slInline justify=\"end\">\n      <ng-container slPopover align=\"start\" size=\"lg\">\n        <button slButton tone=\"secondary\" variant=\"outline\" slPopoverTrigger>Volume pricing</button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Volume pricing for Chai</div>\n            </div>\n            <div slPopoverBody>\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            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class PopoverNarrow {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "table-row",
+      "title": "table-row.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDescriptionList,\n  SlDescriptionListDescription,\n  SlDescriptionListItem,\n  SlDescriptionListTerm,\n} from '@slotted/angular/description-list';\nimport {\n  SlPopover,\n  SlPopoverAnchor,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverClose,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport {\n  SlTable,\n  SlTableBody,\n  SlTableCaption,\n  SlTableCell,\n  SlTableColumnHeader,\n  SlTableContent,\n  SlTableHead,\n  SlTableRow,\n  SlTableRowHeader,\n} from '@slotted/angular/table';\n\n@Component({\n  selector: 'app-popover-table-row',\n  imports: [\n    SlButton,\n    SlDescriptionList,\n    SlDescriptionListDescription,\n    SlDescriptionListItem,\n    SlDescriptionListTerm,\n    SlPopover,\n    SlPopoverAnchor,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverClose,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlTable,\n    SlTableBody,\n    SlTableCaption,\n    SlTableCell,\n    SlTableColumnHeader,\n    SlTableContent,\n    SlTableHead,\n    SlTableRow,\n    SlTableRowHeader,\n  ],\n  template: `\n    <div slTable [columns]=\"3\">\n      <div slTableContent>\n        <caption slTableCaption>\n          Shipped orders\n        </caption>\n        <thead slTableHead>\n          <tr slTableRow>\n            <th slTableColumnHeader>Order</th>\n            <th slTableColumnHeader>Customer</th>\n            <th slTableColumnHeader>Shipment</th>\n          </tr>\n        </thead>\n        <tbody slTableBody>\n          @for (order of orders; track order.id) {\n            <ng-container slPopover align=\"end\">\n              <tr slTableRow slPopoverAnchor [value]=\"order.id\">\n                <th slTableRowHeader>{{ order.id }}</th>\n                <td slTableCell>{{ order.customer }}</td>\n                <td slTableCell>\n                  <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" slPopoverTrigger>\n                    Tracking\n                  </button>\n                </td>\n              </tr>\n              <ng-template slPopoverLayer>\n                <div slPopoverContent>\n                  <div slPopoverHeader>\n                    <div slPopoverTitle>Order {{ order.id }} shipment</div>\n                    <button slPopoverClose></button>\n                  </div>\n                  <div slPopoverBody>\n                    <div slDescriptionList>\n                      <div slDescriptionListItem>\n                        <dt slDescriptionListTerm>Carrier</dt>\n                        <dd slDescriptionListDescription>{{ order.carrier }}</dd>\n                      </div>\n                      <div slDescriptionListItem>\n                        <dt slDescriptionListTerm>Tracking</dt>\n                        <dd slDescriptionListDescription>{{ order.tracking }}</dd>\n                      </div>\n                      <div slDescriptionListItem>\n                        <dt slDescriptionListTerm>Shipped</dt>\n                        <dd slDescriptionListDescription>{{ order.shipped }}</dd>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n                <div slPopoverArrow></div>\n              </ng-template>\n            </ng-container>\n          }\n        </tbody>\n      </div>\n    </div>\n  `,\n})\nexport class PopoverTableRow {\n  readonly 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}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "toolbar",
+      "title": "toolbar.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlCheckbox } from '@slotted/angular/checkbox';\nimport { SlCheckboxGroup } from '@slotted/angular/checkbox-group';\nimport {\n  SlPopover,\n  SlPopoverArrow,\n  SlPopoverBody,\n  SlPopoverContent,\n  SlPopoverHeader,\n  SlPopoverLayer,\n  SlPopoverTitle,\n  SlPopoverTrigger,\n} from '@slotted/angular/popover';\nimport { SlToolbar, SlToolbarSpacer } from '@slotted/angular/toolbar';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-popover-toolbar',\n  imports: [\n    SlButton,\n    SlCheckbox,\n    SlCheckboxGroup,\n    SlPopover,\n    SlPopoverArrow,\n    SlPopoverBody,\n    SlPopoverContent,\n    SlPopoverHeader,\n    SlPopoverLayer,\n    SlPopoverTitle,\n    SlPopoverTrigger,\n    SlText,\n    SlToolbar,\n    SlToolbarSpacer,\n  ],\n  template: `\n    <div slToolbar aria-label=\"Orders\">\n      <ng-container slPopover align=\"start\">\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" slPopoverTrigger>Status</button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Show orders that are</div>\n            </div>\n            <div slPopoverBody>\n              <div\n                slCheckboxGroup\n                aria-label=\"Status\"\n                [value]=\"shown()\"\n                (valueChange)=\"shown.set($event.value)\"\n              >\n                @for (status of statuses; track status.value) {\n                  <div slCheckbox [value]=\"status.value\">{{ status.label }}</div>\n                }\n              </div>\n            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slPopover align=\"start\">\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" slPopoverTrigger>\n          Columns\n        </button>\n        <ng-template slPopoverLayer>\n          <div slPopoverContent>\n            <div slPopoverHeader>\n              <div slPopoverTitle>Columns</div>\n            </div>\n            <div slPopoverBody>\n              <div slCheckboxGroup aria-label=\"Columns\" [defaultValue]=\"['customer', 'total']\">\n                <div slCheckbox value=\"customer\">Customer</div>\n                <div slCheckbox value=\"ship-via\">Ship via</div>\n                <div slCheckbox value=\"total\">Total</div>\n              </div>\n            </div>\n          </div>\n          <div slPopoverArrow></div>\n        </ng-template>\n      </ng-container>\n      <div slToolbarSpacer></div>\n      <span slText size=\"sm\" tone=\"muted\">{{ count() }} orders</span>\n    </div>\n  `,\n})\nexport class PopoverToolbar {\n  readonly 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  readonly shown = signal<readonly string[]>(['pending', 'shipped']);\n  readonly count = computed(() =>\n    this.statuses\n      .filter((status) => this.shown().includes(status.value))\n      .reduce((sum, status) => sum + status.orders, 0),\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}