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

package/docs/tooltip.json

@@ -0,0 +1,604 @@
+{
+  "family": "tooltip",
+  "ui": "tooltip",
+  "binding": "angular",
+  "catalog": {
+    "group": "Overlays",
+    "summary": "Short label shown on hover or focus."
+  },
+  "axes": {
+    "variant": [
+      "inverse",
+      "surface"
+    ],
+    "size": [
+      "sm",
+      "md"
+    ],
+    "describes": [
+      "description",
+      "label",
+      "none"
+    ],
+    "openOn": [
+      "hover",
+      "focus",
+      "manual"
+    ],
+    "side": [
+      "top",
+      "bottom",
+      "inline-start",
+      "inline-end",
+      "left",
+      "right"
+    ],
+    "align": [
+      "start",
+      "center",
+      "end"
+    ],
+    "mount": [
+      "active",
+      "lazy",
+      "eager"
+    ],
+    "strategy": [
+      "absolute",
+      "fixed"
+    ],
+    "arrow": [
+      true,
+      false
+    ],
+    "hoverable": [
+      true,
+      false
+    ],
+    "closeOnPress": [
+      true,
+      false
+    ],
+    "flip": [
+      true,
+      false
+    ],
+    "shift": [
+      true,
+      false
+    ],
+    "hideWhenDetached": [
+      true,
+      false
+    ],
+    "portal": [
+      true,
+      false
+    ],
+    "disabled": [
+      true,
+      false
+    ],
+    "whenClipped": [
+      true,
+      false
+    ]
+  },
+  "members": {
+    "tooltip": {
+      "nativeElement": "div",
+      "defaults": {
+        "variant": "inverse",
+        "size": "md",
+        "describes": "description",
+        "openOn": "hover",
+        "side": "top",
+        "align": "center",
+        "mount": "active",
+        "strategy": "absolute",
+        "arrow": true,
+        "hoverable": true,
+        "closeOnPress": true,
+        "flip": true,
+        "shift": true,
+        "hideWhenDetached": true,
+        "portal": true,
+        "disabled": false,
+        "openDelay": 600,
+        "closeDelay": 150,
+        "groupDelay": 400,
+        "touchDelay": 500,
+        "sideOffset": 0,
+        "alignOffset": 0,
+        "collisionPadding": 8,
+        "arrowPadding": 8,
+        "whenClipped": false
+      },
+      "capabilities": [
+        "open",
+        "placement",
+        "size",
+        "appearance",
+        "disabled",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "open"
+      ],
+      "parts": [
+        "root",
+        "content",
+        "arrow"
+      ]
+    }
+  },
+  "docs": {
+    "tooltip": {
+      "imports": {
+        "source": "import {\n  provideTooltipDefaults,\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';",
+        "selector": "[slTooltip] on an ng-container, [slTooltipTrigger] on the control, ng-template[slTooltipLayer], [slTooltipContent], [slTooltipArrow]",
+        "exportAs": "slTooltip"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "div",
+          "required": true,
+          "purpose": "The layer, built from ng-template[slTooltipLayer] when the tooltip mounts. The positioner writes its position, left and top, and the layer carries the scale and fade of the entrance. Its padding is the gap between the trigger and the surface, so the pointer crosses onto a hoverable tooltip without leaving it. It carries data-ui=\"tooltip\", data-side, data-align, data-open and data-detached."
+        },
+        {
+          "part": "content",
+          "element": "div",
+          "required": true,
+          "purpose": "The painted surface, [slTooltipContent], with role=\"tooltip\". It is a component, and it brings the tooltip stylesheet into the application. The trigger refers to it with aria-describedby, or with aria-labelledby under describes=\"label\"."
+        },
+        {
+          "part": "arrow",
+          "element": "div",
+          "required": false,
+          "purpose": "A rotated square, [slTooltipArrow], drawn over the edge of the surface so its two outer edges continue the outline. Place it beside the content inside ng-template[slTooltipLayer], not inside the content: the stylesheet selects it as a direct child of the layer. It is hidden from assistive technology."
+        }
+      ],
+      "api": [
+        {
+          "name": "open",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTooltip",
+          "description": "Whether the tooltip is open. It is two-way: bind [(open)] to a signal to read and set the state, or leave it unbound and the tooltip keeps its own."
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTooltip",
+          "description": "The state an uncontrolled tooltip starts in, read once in ngOnInit."
+        },
+        {
+          "name": "variant",
+          "type": "'inverse' | 'surface'",
+          "defaultValue": "inverse",
+          "appliesTo": "slTooltip",
+          "description": "inverse paints the tooltip in the colour opposite to the page, which needs no edge on a light page. surface paints the raised panel colour with a hairline border, for a page that is already dark."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md'",
+          "defaultValue": "md",
+          "appliesTo": "slTooltip",
+          "description": "The type step: sm for dense rows such as toolbars and table cells, md elsewhere. Both steps follow the density of the region, because both read the control scale."
+        },
+        {
+          "name": "describes",
+          "type": "'description' | 'label' | 'none'",
+          "defaultValue": "description",
+          "appliesTo": "slTooltip",
+          "description": "How the trigger refers to the tooltip. description writes aria-describedby while the tooltip is open. label writes aria-labelledby, so the tooltip is the accessible name of an icon-only button, and it forces mount=\"eager\" so the name exists before the first open. none writes no reference and hides the content from assistive technology, for a tooltip that repeats words the trigger already carries."
+        },
+        {
+          "name": "openOn",
+          "type": "'hover' | 'focus' | 'manual'",
+          "defaultValue": "hover",
+          "appliesTo": "slTooltip",
+          "description": "What opens the tooltip. hover opens it on pointer hover and on keyboard focus, and focus opens it without a delay. focus opens it on keyboard focus only. manual binds neither: the tooltip opens only through open, show() or hide()."
+        },
+        {
+          "name": "side",
+          "type": "'top' | 'bottom' | 'inline-start' | 'inline-end' | 'left' | 'right'",
+          "defaultValue": "top",
+          "appliesTo": "slTooltip",
+          "description": "The edge of the trigger the tooltip prefers. inline-start and inline-end follow the writing direction of the layer, resolved at every measurement; left and right do not."
+        },
+        {
+          "name": "align",
+          "type": "'start' | 'center' | 'end'",
+          "defaultValue": "center",
+          "appliesTo": "slTooltip",
+          "description": "Where the tooltip sits along the edge it took: at the start of the trigger, at its centre or at its end."
+        },
+        {
+          "name": "mount",
+          "type": "'active' | 'lazy' | 'eager'",
+          "defaultValue": "active",
+          "appliesTo": "slTooltip",
+          "description": "When the layer is in the document. active adds it on open and removes it after the exit animation, lazy keeps it after the first open, and eager renders it from the start."
+        },
+        {
+          "name": "strategy",
+          "type": "'absolute' | 'fixed'",
+          "defaultValue": "absolute",
+          "appliesTo": "slTooltip",
+          "description": "The CSS position of the layer. Use fixed for a trigger inside an overflow: hidden ancestor, and absolute for one inside a transformed ancestor."
+        },
+        {
+          "name": "arrow",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the layer draws the arrow."
+        },
+        {
+          "name": "hoverable",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the pointer can move from the trigger onto the tooltip without it closing. WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) requires it, so turn it off only for content that meets the criterion another way."
+        },
+        {
+          "name": "closeOnPress",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether pressing the trigger closes the tooltip, so it is not left over the dialog its button opened."
+        },
+        {
+          "name": "flip",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the tooltip moves to the opposite edge when the preferred edge has no room."
+        },
+        {
+          "name": "shift",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the tooltip slides along its edge to stay inside the boundary."
+        },
+        {
+          "name": "hideWhenDetached",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the layer hides while its trigger is outside the clipping ancestor. The tooltip hides without closing and shows again when the trigger comes back; the pointer leaving is what closes it."
+        },
+        {
+          "name": "portal",
+          "type": "boolean",
+          "defaultValue": "true",
+          "appliesTo": "slTooltip",
+          "description": "Whether the layer renders into the shared portal root at the end of the document. The portal root keeps the theme, colour scheme, density and direction of the region the tooltip opened from."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTooltip",
+          "description": "Turns the tooltip off: it never opens and renders no layer. The disabled state of the trigger is set on the trigger itself."
+        },
+        {
+          "name": "whenClipped",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "slTooltip",
+          "description": "Opens the tooltip only while the text of the trigger is cut off by its box, such as a column header truncated to “Op…”. The trigger is measured at the moment the tooltip would open, so a column dragged wider stops opening it."
+        },
+        {
+          "name": "openDelay",
+          "type": "number",
+          "defaultValue": "600",
+          "appliesTo": "slTooltip",
+          "description": "Milliseconds the pointer rests on the trigger before the tooltip opens. Keyboard focus opens it without waiting."
+        },
+        {
+          "name": "closeDelay",
+          "type": "number",
+          "defaultValue": "150",
+          "appliesTo": "slTooltip",
+          "description": "Milliseconds the tooltip stays after the pointer leaves, which is the time the pointer has to reach a hoverable tooltip. At 0 the pointer cannot reach it."
+        },
+        {
+          "name": "groupDelay",
+          "type": "number",
+          "defaultValue": "400",
+          "appliesTo": "provideTooltipDefaults",
+          "description": "Milliseconds after one tooltip closes during which the next one in the same injector opens without openDelay, so a row of buttons pays the wait once. It is set through the provider, because every tooltip in that injector shares the window."
+        },
+        {
+          "name": "touchDelay",
+          "type": "number",
+          "defaultValue": "500",
+          "appliesTo": "slTooltip",
+          "description": "Milliseconds a touch is held on the trigger before the tooltip opens. A tap does not open it, because a tap is the action of the control."
+        },
+        {
+          "name": "sideOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slTooltip",
+          "description": "Distance in pixels between the trigger and the tooltip beyond the standard gap. The standard gap is the padding of the layer, not empty page."
+        },
+        {
+          "name": "alignOffset",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "slTooltip",
+          "description": "Distance in pixels the tooltip moves along its edge from the aligned position."
+        },
+        {
+          "name": "collisionPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "slTooltip",
+          "description": "The smallest distance in pixels between the tooltip and the edge of the boundary."
+        },
+        {
+          "name": "arrowPadding",
+          "type": "number",
+          "defaultValue": "8",
+          "appliesTo": "slTooltip",
+          "description": "The smallest distance in pixels between the arrow and the rounded corners of the surface, where the surface would stop covering the base of the arrow."
+        }
+      ],
+      "composition": [
+        {
+          "name": "slTooltipTrigger",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "the control",
+          "description": "Goes on a control the page already has, such as a slButton or a slIconButton. The tooltip writes only the ARIA reference and data-open on it, and no data-part, so the control keeps its own styling."
+        },
+        {
+          "name": "ng-template[slTooltipLayer]",
+          "type": "directive",
+          "defaultValue": "—",
+          "appliesTo": "slTooltip",
+          "description": "Holds the layer content in a template, because the layer is built when the tooltip mounts and removed when it unmounts. Its exportAs, slTooltipLayer, reaches reposition()."
+        },
+        {
+          "name": "exportAs",
+          "type": "slTooltip",
+          "defaultValue": "—",
+          "appliesTo": "slTooltip",
+          "description": "A template reference such as #hint=\"slTooltip\" reaches show() and hide(), which open and close the tooltip without a delay."
+        },
+        {
+          "name": "provideTooltipDefaults",
+          "type": "(defaults: Partial<TooltipDefaults>) => Provider[]",
+          "defaultValue": "—",
+          "appliesTo": "providers",
+          "description": "Sets any axis and any delay once for every tooltip in the injector it is provided in, and holds the group window. A value set on one tooltip wins."
+        },
+        {
+          "name": "provideSlottedPortalContainer",
+          "type": "(container: () => Element | null) => Provider",
+          "defaultValue": "document.body",
+          "appliesTo": "providers",
+          "description": "Names the element every layer renders into, set through setPortalContainer. An application shell with its own stacking context provides it once."
+        }
+      ],
+      "events": [
+        {
+          "name": "openChange",
+          "payload": "boolean",
+          "when": "Emitted after the tooltip changes its own value, which is what makes [(open)] two-way. Bind it alone when the template only reads the state."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "TooltipChangeRequest",
+          "when": "Emitted once per change, before the layer moves. The request carries value, previous, reason (pointer, keyboard, escape, blur or programmatic) and the originating event. cancel() refuses the change: nothing moves and openChange is not emitted."
+        }
+      ],
+      "accessibility": [
+        "The content has role=\"tooltip\" and the trigger refers to it: with aria-describedby by default, and with aria-labelledby under describes=\"label\". An icon-only button that its tooltip only describes has no name, and a screen reader announces it as “button”.",
+        "Escape closes the tooltip and leaves focus on the trigger. It reaches the topmost layer only, so a tooltip open over a popover closes first. Escape is the whole keyboard table of the WAI-ARIA tooltip pattern, and it meets WCAG 2.2 SC 1.4.13 Dismissible. The tooltip never takes focus and holds nothing focusable: content with a link or a button belongs in a Popover.",
+        "The pointer can move onto the tooltip without it closing, because the gap between the trigger and the surface is the padding of the layer, not empty page (SC 1.4.13 Hoverable). Nothing closes the tooltip on a timer (Persistent).",
+        "A coarse pointer has no hover, so a long press opens the tooltip and a tap does not. A tooltip is supplementary: a fact reachable only by hover or long press is a fact many readers never reach, so a tooltip may never be the only place a fact is written."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-duration-medium",
+    "--slotted-duration-short",
+    "--slotted-easing-enter",
+    "--slotted-easing-exit",
+    "--slotted-font-family-sans",
+    "--slotted-font-weight-regular",
+    "--slotted-line-height-sm",
+    "--slotted-radius-sm",
+    "--slotted-radius-xs",
+    "--slotted-shadow-xs",
+    "--slotted-space-2",
+    "--slotted-space-4",
+    "--slotted-surface-inverse",
+    "--slotted-surface-raised",
+    "--slotted-text",
+    "--slotted-text-inverse",
+    "--slotted-tooltip-arrow-size",
+    "--slotted-tooltip-arrow-tip-radius",
+    "--slotted-tooltip-border-color",
+    "--slotted-tooltip-gap",
+    "--slotted-tooltip-measure",
+    "--slotted-tooltip-measure-sm",
+    "--slotted-tooltip-radius",
+    "--slotted-tooltip-shadow",
+    "--slotted-tooltip-surface",
+    "--slotted-tooltip-surface-raised",
+    "--slotted-tooltip-text",
+    "--slotted-tooltip-text-raised",
+    "--slotted-z-index-popover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "A hint on a control",
+      "note": "Hover the button, or Tab to it: focus opens the hint in the same task and the pointer waits out the delay first.",
+      "language": "html",
+      "source": "<ng-container slTooltip>\n  <button slButton slTooltipTrigger type=\"button\">Publish</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>Sends the draft to every subscriber</div>\n    <div slTooltipArrow></div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "variant",
+      "title": "Inverse, and surface",
+      "note": "The inverse hint separates itself from a light page with no edge at all; the surface one takes the raised surface and the hairline it needs on a dark ground.",
+      "language": "html",
+      "source": "<ng-container slTooltip variant=\"surface\">\n  <button slButton slTooltipTrigger type=\"button\">On a dark page</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>Reads as a small panel rather than as a label</div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "Two type steps",
+      "note": "Small is the hint inside a dense table row; medium is everywhere else. Switch the density in the toolbar and both tighten without either changing meaning.",
+      "language": "html",
+      "source": "<ng-container slTooltip size=\"sm\">\n  <button slButton slTooltipTrigger type=\"button\">Small</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>Twelve pixels, in a row that has no room</div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "placement",
+      "title": "Which edge it takes",
+      "note": "Four sides around one anchor. inline-start and inline-end mirror with the direction; left and right do not, which is why the arrow stays put when the toolbar switches to rtl.",
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n  type TooltipAlign,\n  type TooltipSide,\n} from '@slotted/angular/tooltip';\n\nconst ACTIONS: { label: string; hint: string; side: TooltipSide; align: TooltipAlign }[] = [\n  {\n    label: 'Print label',\n    hint: 'Prints a 4 × 6 label at packing station 3.',\n    side: 'top',\n    align: 'center',\n  },\n  {\n    label: 'Weigh parcel',\n    hint: 'Reads the scale under station 3.',\n    side: 'bottom',\n    align: 'center',\n  },\n  {\n    label: 'Previous order',\n    hint: 'SO-10484 · Northgate Labs',\n    side: 'inline-start',\n    align: 'center',\n  },\n  { label: 'Next order', hint: 'SO-10486 · Quill & Co.', side: 'inline-end', align: 'start' },\n];\n\n@Component({\n  selector: 'app-tooltip-placement',\n  imports: [\n    SlButton,\n    SlInline,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" align=\"center\">\n      @for (action of actions; track action.label) {\n        <ng-container slTooltip [side]=\"action.side\" [align]=\"action.align\">\n          <button slButton slTooltipTrigger variant=\"outline\">{{ action.label }}</button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>{{ action.hint }}</div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n    </div>\n  `,\n})\nexport class TooltipPlacement {\n  protected readonly actions = ACTIONS;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "delay",
+      "title": "The warmup, and the group window",
+      "note": "Cross the row of buttons quickly and nothing opens. Rest on one, wait, and it opens; move to its neighbour inside the group window and that one opens in the same task.",
+      "language": "ts",
+      "source": "@Component({\n  providers: [provideTooltipDefaults({ groupDelay: 400, openDelay: 600 })],\n})\nexport class RowActions {}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "describes",
+      "title": "Description, or name",
+      "note": "The left button is labelled and the hint describes it. The right one has no words of its own, so the hint is its accessible name and the layer is in the document before anyone opens it.",
+      "language": "html",
+      "source": "<ng-container slTooltip describes=\"label\">\n  <button slButton slTooltipTrigger type=\"button\">+</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>Add a row</div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "hoverable",
+      "title": "Reaching the hint with the pointer",
+      "note": "Open the left one and move the pointer onto it: it stays, because the gap is the layer own padding. The right one is [hoverable]=\"false\" and lets the pointer straight through.",
+      "language": "html",
+      "source": "<ng-container slTooltip [hoverable]=\"false\">\n  <button slButton slTooltipTrigger type=\"button\">Passes through</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>The pointer never lands on this one</div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "content",
+      "title": "Content the family did not choose",
+      "note": "A sentence long enough to meet the measure, a single unbroken token, and a string in another script. The cap is a token rather than an axis, because measure belongs to Container.",
+      "language": "html",
+      "source": "<div slTooltipContent>\n  Publishing sends the draft to every subscriber on the list and cannot be undone from here.\n</div>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "disabled",
+      "title": "A hint on a control that is out of action",
+      "note": "A native disabled button fires no pointer events, so its explanation is unreachable. Use aria-disabled on a control that stays focusable, or put the trigger on a wrapper.",
+      "language": "html",
+      "source": "<ng-container slTooltip>\n  <button aria-disabled=\"true\" slButton slTooltipTrigger type=\"button\">Publish</button>\n  <ng-template slTooltipLayer>\n    <div slTooltipContent>Publish once the invoice has a customer</div>\n  </ng-template>\n</ng-container>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "composition",
+      "title": "In a row of icon buttons",
+      "note": "Where a tooltip actually lives. Every trigger is the consumer own button, and one provider sets the hint and the delays for the whole row.",
+      "language": "ts",
+      "source": "@Component({\n  providers: [provideTooltipDefaults({ describes: 'label', size: 'sm' })],\n})\nexport class Toolbar {}\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "What the keyboard does",
+      "note": "Tab in and the hint opens with no delay; press Escape and it goes without the focus moving; press Enter and the button acts and the hint clears itself away.",
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport type { ChangeRequest } from '@slotted/core/state';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-tooltip-keyboard',\n  imports: [\n    SlButton,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline [gap]=\"3\" align=\"center\">\n        <ng-container slTooltip (openChangeRequest)=\"report($event)\">\n          <button slButton slTooltipTrigger variant=\"outline\">Approve return</button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>Refunds $86.00 to Verde Kitchen and restocks 2 units.</div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n        <ng-container slTooltip (openChangeRequest)=\"report($event)\">\n          <button slButton slTooltipTrigger variant=\"outline\">Reject return</button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>Ships the parcel back to the customer at their cost.</div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">{{ last() }}</span>\n    </div>\n  `,\n})\nexport class TooltipKeyboard {\n  protected readonly last = signal('Tab to a button, then press Escape or Enter.');\n\n  protected report(request: ChangeRequest<boolean>) {\n    this.last.set(`${request.value ? 'Opened' : 'Closed'} by ${request.reason}.`);\n  }\n}\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  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\n@Component({\n  selector: 'app-tooltip-basic',\n  imports: [\n    SlButton,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <ng-container slTooltip>\n      <button slButton slTooltipTrigger variant=\"outline\">Sync inventory</button>\n      <ng-template slTooltipLayer>\n        <div slTooltipContent>Pulls stock levels from Reno, Columbus and Savannah.</div>\n        <div slTooltipArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class TooltipBasic {}\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 { SlStack } from '@slotted/angular/stack';\nimport {\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-tooltip-controlled',\n  imports: [\n    SlButton,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline [gap]=\"3\" align=\"center\">\n        <ng-container slTooltip [(open)]=\"open\">\n          <button slButton slTooltipTrigger variant=\"outline\">Same-day dispatch</button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>\n              Orders placed before 2:00 PM Pacific leave Reno the same day.\n            </div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n        <button slButton variant=\"ghost\" (click)=\"open.set(true)\">Show the cutoff</button>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">\n        {{ open() ? 'The cutoff hint is open.' : 'The cutoff hint is closed.' }}\n      </span>\n    </div>\n  `,\n})\nexport class TooltipControlled {\n  protected readonly open = signal(false);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "delays",
+      "title": "delays.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  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\n@Component({\n  selector: 'app-tooltip-delays',\n  imports: [\n    SlButton,\n    SlInline,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" align=\"center\">\n      <ng-container slTooltip>\n        <button slButton slTooltipTrigger variant=\"outline\">Release hold</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Returns SO-10483 to the pick queue in Reno.</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slTooltip [openDelay]=\"1200\" [closeDelay]=\"400\">\n        <button slButton slTooltipTrigger variant=\"outline\" tone=\"danger\">Cancel order</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Refunds $318.50 to Brightline Studio and restocks 3 lines.</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slTooltip [openDelay]=\"200\">\n        <button slButton slTooltipTrigger variant=\"outline\">Track parcel</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>UPS · out for delivery in Portland, OR.</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class TooltipDelays {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled-trigger",
+      "title": "disabled-trigger.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\n@Component({\n  selector: 'app-tooltip-disabled-trigger',\n  imports: [\n    SlButton,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <ng-container slTooltip>\n      <button slButton slTooltipTrigger disabled focusableWhenDisabled>Ship order</button>\n      <ng-template slTooltipLayer>\n        <div slTooltipContent>2 of 6 lines are still waiting to be picked in Savannah.</div>\n        <div slTooltipArrow></div>\n      </ng-template>\n    </ng-container>\n  `,\n})\nexport class TooltipDisabledTrigger {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "icon-button",
+      "title": "icon-button.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlIconButton } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport {\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-tooltip-icon-button',\n  imports: [\n    SlGlyph,\n    SlIconButton,\n    SlInline,\n    SlText,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"2\" align=\"center\">\n      <span slText numeric=\"tabular\">UPS 1Z999AA10123456784</span>\n      <ng-container slTooltip describes=\"label\">\n        <button slIconButton slTooltipTrigger variant=\"ghost\">\n          <svg slGlyph name=\"copy\"></svg>\n        </button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Copy tracking number</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slTooltip describes=\"label\">\n        <button slIconButton slTooltipTrigger variant=\"ghost\">\n          <svg slGlyph name=\"external\"></svg>\n        </button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Open on the UPS site</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class TooltipIconButton {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "long-content",
+      "title": "long-content.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  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\n@Component({\n  selector: 'app-tooltip-long-content',\n  imports: [\n    SlButton,\n    SlInline,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" align=\"center\">\n      <ng-container slTooltip>\n        <button slButton slTooltipTrigger variant=\"outline\">Carrier exception</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>\n            UPS reported an address exception at the Memphis hub on September 29. The parcel is held\n            until Atlas Freight confirms a delivery window.\n          </div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slTooltip>\n        <button slButton slTooltipTrigger variant=\"outline\">Return label</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>RMA-2291-SO10485-1Z999AA10123456784-ATLASFREIGHT-MEMPHIS</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class TooltipLongContent {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "toolbar",
+      "title": "toolbar.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlIconButton } from '@slotted/angular/button';\nimport { SlGlyph, type GlyphName } from '@slotted/angular/icon';\nimport { SlToolbar, SlToolbarSeparator } from '@slotted/angular/toolbar';\nimport {\n  provideTooltipDefaults,\n  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\ninterface Action {\n  icon: GlyphName;\n  label: string;\n}\n\nconst DOCUMENTS: Action[] = [\n  { icon: 'copy', label: 'Copy order number' },\n  { icon: 'file-text', label: 'Print packing slip' },\n  { icon: 'paperclip', label: 'Attach invoice' },\n];\n\nconst TRACKING: Action[] = [\n  { icon: 'bell', label: 'Notify me on delivery' },\n  { icon: 'pin', label: 'Pin to overview' },\n  { icon: 'external', label: 'Open on the UPS site' },\n];\n\n@Component({\n  selector: 'app-tooltip-toolbar',\n  imports: [\n    SlGlyph,\n    SlIconButton,\n    SlToolbar,\n    SlToolbarSeparator,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  providers: [provideTooltipDefaults({ describes: 'label', size: 'sm' })],\n  template: `\n    <div slToolbar aria-label=\"Order SO-10485\">\n      @for (action of documents; track action.label) {\n        <ng-container slTooltip>\n          <button slIconButton slTooltipTrigger size=\"sm\" variant=\"ghost\">\n            <svg slGlyph [name]=\"action.icon\"></svg>\n          </button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>{{ action.label }}</div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n      <div slToolbarSeparator></div>\n      @for (action of tracking; track action.label) {\n        <ng-container slTooltip>\n          <button slIconButton slTooltipTrigger size=\"sm\" variant=\"ghost\">\n            <svg slGlyph [name]=\"action.icon\"></svg>\n          </button>\n          <ng-template slTooltipLayer>\n            <div slTooltipContent>{{ action.label }}</div>\n            <div slTooltipArrow></div>\n          </ng-template>\n        </ng-container>\n      }\n    </div>\n  `,\n})\nexport class TooltipToolbar {\n  protected readonly documents = DOCUMENTS;\n  protected readonly tracking = TRACKING;\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "variants",
+      "title": "variants.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  SlTooltip,\n  SlTooltipArrow,\n  SlTooltipContent,\n  SlTooltipLayer,\n  SlTooltipTrigger,\n} from '@slotted/angular/tooltip';\n\n@Component({\n  selector: 'app-tooltip-variants',\n  imports: [\n    SlButton,\n    SlInline,\n    SlTooltip,\n    SlTooltipArrow,\n    SlTooltipContent,\n    SlTooltipLayer,\n    SlTooltipTrigger,\n  ],\n  template: `\n    <div slInline [gap]=\"3\" align=\"center\">\n      <ng-container slTooltip>\n        <button slButton slTooltipTrigger variant=\"outline\">Reserve 40 units</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Holds 40 units of NW-4471 in Reno for 48 hours.</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n      <ng-container slTooltip variant=\"surface\">\n        <button slButton slTooltipTrigger variant=\"outline\">Transfer stock</button>\n        <ng-template slTooltipLayer>\n          <div slTooltipContent>Moves the units from Columbus to Savannah on the next truck.</div>\n          <div slTooltipArrow></div>\n        </ng-template>\n      </ng-container>\n    </div>\n  `,\n})\nexport class TooltipVariants {}\n",
+      "verdict": "example"
+    }
+  ]
+}