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

package/docs/button.json

@@ -0,0 +1,977 @@
+{
+  "family": "button",
+  "ui": "button",
+  "binding": "angular",
+  "catalog": {
+    "group": "Actions",
+    "summary": "Button, link button, icon button and toggle button."
+  },
+  "axes": {
+    "tone": [
+      "accent",
+      "secondary",
+      "success",
+      "warning",
+      "danger"
+    ],
+    "variant": [
+      "solid",
+      "outline",
+      "ghost"
+    ],
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "shape": [
+      "square",
+      "circle"
+    ]
+  },
+  "members": {
+    "button": {
+      "nativeElement": "button",
+      "defaults": {
+        "tone": "accent",
+        "variant": "solid",
+        "size": "md",
+        "type": "button",
+        "fullWidth": false,
+        "disabled": false,
+        "focusableWhenDisabled": false,
+        "loading": false,
+        "loadingDelay": 0
+      },
+      "capabilities": [
+        "appearance",
+        "content",
+        "fullWidth",
+        "disabled",
+        "loading"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "start",
+        "label",
+        "end",
+        "indicator"
+      ]
+    },
+    "buttonLink": {
+      "nativeElement": "a",
+      "defaults": {
+        "tone": "accent",
+        "variant": "solid",
+        "size": "md",
+        "fullWidth": false,
+        "disabled": false
+      },
+      "capabilities": [
+        "appearance",
+        "content",
+        "fullWidth",
+        "disabled"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled"
+      ],
+      "parts": [
+        "root",
+        "start",
+        "label",
+        "end"
+      ]
+    },
+    "iconButton": {
+      "nativeElement": "button",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "ghost",
+        "size": "md",
+        "shape": "square",
+        "type": "button",
+        "disabled": false,
+        "focusableWhenDisabled": false,
+        "loading": false,
+        "loadingDelay": 0
+      },
+      "capabilities": [
+        "appearance",
+        "shape",
+        "disabled",
+        "loading",
+        "pressed"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "loading",
+        "pressed"
+      ],
+      "parts": [
+        "root",
+        "icon",
+        "indicator"
+      ]
+    },
+    "toggleButton": {
+      "nativeElement": "button",
+      "defaults": {
+        "tone": "secondary",
+        "variant": "outline",
+        "size": "md",
+        "type": "button",
+        "fullWidth": false,
+        "disabled": false,
+        "focusableWhenDisabled": false,
+        "loading": false,
+        "loadingDelay": 0,
+        "defaultPressed": false
+      },
+      "capabilities": [
+        "appearance",
+        "content",
+        "fullWidth",
+        "disabled",
+        "loading",
+        "pressed"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "disabled",
+        "loading",
+        "pressed"
+      ],
+      "parts": [
+        "root",
+        "start",
+        "label",
+        "end",
+        "indicator"
+      ]
+    }
+  },
+  "docs": {
+    "button": {
+      "imports": {
+        "source": "import {\n  provideButtonDefaults,\n  SlButton,\n  SlButtonEnd,\n  SlButtonLink,\n  SlButtonStart,\n  SlIconButton,\n  SlToggleButton,\n} from '@slotted/angular/button';",
+        "selector": "button[slButton], [slButtonStart], [slButtonEnd]",
+        "exportAs": "slButton"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the button element you write",
+          "required": true,
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled and data-loading when they apply."
+        },
+        {
+          "part": "start",
+          "element": "the element you mark with slButtonStart",
+          "required": false,
+          "purpose": "Holds the start content. Absent when nothing is marked. While loading, it holds the indicator."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "Wraps the projected text. Always rendered, because the accessible name is computed from it. With reduced motion or forced colours, a loading button with no icon fades it in place, and it keeps its size."
+        },
+        {
+          "part": "end",
+          "element": "the element you mark with slButtonEnd",
+          "required": false,
+          "purpose": "Holds the end content. Absent when nothing is marked. While loading, it holds the indicator when there is no start content."
+        },
+        {
+          "part": "indicator",
+          "element": "span with role=\"progressbar\"",
+          "required": false,
+          "purpose": "The loading indicator. Carries data-ui=\"spinner\", is named by messages.loading, and has no value, so it reads as indeterminate. Rendered in the start box, else in the end box, else centred over the label, once loadingDelay has passed."
+        }
+      ],
+      "api": [
+        {
+          "name": "tone",
+          "type": "accent | secondary | success | warning | danger",
+          "defaultValue": "accent",
+          "appliesTo": "SlButton",
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+        },
+        {
+          "name": "variant",
+          "type": "solid | outline | ghost",
+          "defaultValue": "solid",
+          "appliesTo": "SlButton",
+          "description": "How the tone is painted: solid, outline or ghost."
+        },
+        {
+          "name": "size",
+          "type": "sm | md | lg",
+          "defaultValue": "md",
+          "appliesTo": "SlButton",
+          "description": "The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height."
+        },
+        {
+          "name": "start",
+          "type": "[slButtonStart]",
+          "defaultValue": "—",
+          "appliesTo": "SlButton",
+          "description": "Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "end",
+          "type": "[slButtonEnd]",
+          "defaultValue": "—",
+          "appliesTo": "SlButton",
+          "description": "Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButton",
+          "description": "Fills the inline size of the container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButton",
+          "description": "Refuses the action and marks the control unavailable. On its own, it sets the native disabled property, which also removes the control from the tab sequence."
+        },
+        {
+          "name": "focusableWhenDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButton",
+          "description": "Keeps a disabled control in the tab sequence: aria-disabled replaces the native property, and activation is still refused."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButton",
+          "description": "Refuses activation, keeps focus, and shows a progress indicator named by messages.loading."
+        },
+        {
+          "name": "loadingDelay",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "SlButton",
+          "description": "Milliseconds before the indicator appears. Activation is refused from the start of the wait."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ButtonMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlButton",
+          "description": "Overrides for the strings of the active locale, key by key. loading names the progress indicator."
+        },
+        {
+          "name": "type",
+          "type": "button | submit | reset",
+          "defaultValue": "button",
+          "appliesTo": "SlButton",
+          "description": "The native button type. Set submit only for a button that submits its form."
+        }
+      ],
+      "composition": [
+        {
+          "name": "provideButtonDefaults",
+          "type": "(defaults: ButtonDefaults) => Provider",
+          "defaultValue": "—",
+          "appliesTo": "SlButton",
+          "description": "Sets the default size, tone and variant of every button under the injector, SlButtonLink, SlIconButton and SlToggleButton included. An explicit input wins, and an axis left unset keeps each member’s own default."
+        }
+      ],
+      "events": [],
+      "accessibility": [
+        "SlButton applies to the button element in your template, so Space, Enter, focus, form submission and the disabled state come from the platform. The visible label supplies the accessible name.",
+        "While loading, the indicator is a progress bar named by messages.loading, and the button announces aria-disabled while it keeps focus. React Aria’s pending button and Primer’s loading button use the same pattern. aria-busy is not set: screen readers do not announce it reliably on a button, and one mechanism already carries the state.",
+        "Where motion is allowed, the indicator is not drawn: once loadingDelay has passed, a band in the button’s own ink sweeps behind the label and the icon, which stay visible. With reduced motion or forced colours, the indicator is a ring drawn in the start or end icon’s box; a button with neither draws it over the label, which drops to zero opacity but stays in the accessibility tree and in the layout, so the accessible name survives the wait and the button keeps its size.",
+        "loading refuses activation on a capture-phase listener, before any click handler in your template, so a submit button cannot submit its form twice.",
+        "focusableWhenDisabled keeps a disabled button reachable. Use it when the button has a tooltip or an explanation a keyboard user needs, such as inside a toolbar. A reachable disabled button uses muted text on the subtle neutral background, at a contrast of 4.5:1 or more; a natively disabled button keeps the disabled grey.",
+        "SlButton has no render input: it applies to the element you write, so writing a different element replaces it.",
+        "A projected start or end icon repeats the label, so mark it aria-hidden. slGlyph sets aria-hidden itself."
+      ]
+    },
+    "buttonLink": {
+      "imports": {
+        "source": "import {\n  provideButtonDefaults,\n  SlButton,\n  SlButtonEnd,\n  SlButtonLink,\n  SlButtonStart,\n  SlIconButton,\n  SlToggleButton,\n} from '@slotted/angular/button';",
+        "selector": "a[slButtonLink]",
+        "exportAs": "slButtonLink"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the anchor element you write",
+          "required": true,
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width and data-disabled when they apply."
+        },
+        {
+          "part": "start",
+          "element": "the element you mark with slButtonStart",
+          "required": false,
+          "purpose": "Holds the start content. Absent when nothing is marked."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "Wraps the projected text. Always rendered, because the accessible name is computed from it."
+        },
+        {
+          "part": "end",
+          "element": "the element you mark with slButtonEnd",
+          "required": false,
+          "purpose": "Holds the end content. Absent when nothing is marked."
+        }
+      ],
+      "api": [
+        {
+          "name": "href",
+          "type": "string",
+          "defaultValue": "—",
+          "appliesTo": "SlButtonLink",
+          "description": "The destination. A disabled SlButtonLink does not render it."
+        },
+        {
+          "name": "tone",
+          "type": "accent | secondary | success | warning | danger",
+          "defaultValue": "accent",
+          "appliesTo": "SlButtonLink",
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+        },
+        {
+          "name": "variant",
+          "type": "solid | outline | ghost",
+          "defaultValue": "solid",
+          "appliesTo": "SlButtonLink",
+          "description": "How the tone is painted: solid, outline or ghost."
+        },
+        {
+          "name": "size",
+          "type": "sm | md | lg",
+          "defaultValue": "md",
+          "appliesTo": "SlButtonLink",
+          "description": "The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height."
+        },
+        {
+          "name": "start",
+          "type": "[slButtonStart]",
+          "defaultValue": "—",
+          "appliesTo": "SlButtonLink",
+          "description": "Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "end",
+          "type": "[slButtonEnd]",
+          "defaultValue": "—",
+          "appliesTo": "SlButtonLink",
+          "description": "Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButtonLink",
+          "description": "Fills the inline size of the container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlButtonLink",
+          "description": "Removes the href and refuses activation. The link stays focusable with role=\"link\" and aria-disabled."
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "SlButtonLink applies to an anchor, so it is announced as a link and activates on Enter. Space does not activate it, as it does not activate any link.",
+        "routerLink works on the same anchor and writes its href. Do not also set href.",
+        "A disabled SlButtonLink renders no href. An anchor that kept its destination and only blocked click would still navigate on a middle click or a modified click.",
+        "A disabled SlButtonLink stays in the tab sequence with role=\"link\" and aria-disabled, so a keyboard user can discover that it is unavailable."
+      ]
+    },
+    "iconButton": {
+      "imports": {
+        "source": "import {\n  provideButtonDefaults,\n  SlButton,\n  SlButtonEnd,\n  SlButtonLink,\n  SlButtonStart,\n  SlIconButton,\n  SlToggleButton,\n} from '@slotted/angular/button';",
+        "selector": "button[slIconButton]",
+        "exportAs": "slIconButton"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the button element you write",
+          "required": true,
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-shape, and data-disabled, data-loading and data-pressed when they apply."
+        },
+        {
+          "part": "icon",
+          "element": "span",
+          "required": true,
+          "purpose": "Wraps the projected icon. While loading, it holds the indicator drawn over the icon, so the control keeps its size."
+        },
+        {
+          "part": "indicator",
+          "element": "span with role=\"progressbar\"",
+          "required": false,
+          "purpose": "The loading indicator. Carries data-ui=\"spinner\", is named by messages.loading, and has no value, so it reads as indeterminate. Rendered inside the icon box once loadingDelay has passed."
+        }
+      ],
+      "api": [
+        {
+          "name": "aria-label | aria-labelledby",
+          "type": "string",
+          "defaultValue": "required",
+          "appliesTo": "SlIconButton",
+          "description": "The accessible name. Required, because an icon supplies no text."
+        },
+        {
+          "name": "tone",
+          "type": "accent | secondary | success | warning | danger",
+          "defaultValue": "secondary",
+          "appliesTo": "SlIconButton",
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+        },
+        {
+          "name": "variant",
+          "type": "solid | outline | ghost",
+          "defaultValue": "ghost",
+          "appliesTo": "SlIconButton",
+          "description": "How the tone is painted: solid, outline or ghost."
+        },
+        {
+          "name": "size",
+          "type": "sm | md | lg",
+          "defaultValue": "md",
+          "appliesTo": "SlIconButton",
+          "description": "The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height."
+        },
+        {
+          "name": "shape",
+          "type": "square | circle",
+          "defaultValue": "square",
+          "appliesTo": "SlIconButton",
+          "description": "The corners of the control: square keeps the radius of the control scale, circle rounds it fully. Both are as wide as they are tall."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlIconButton",
+          "description": "Refuses the action and marks the control unavailable. On its own, it sets the native disabled property, which also removes the control from the tab sequence."
+        },
+        {
+          "name": "focusableWhenDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlIconButton",
+          "description": "Keeps a disabled control in the tab sequence: aria-disabled replaces the native property, and activation is still refused."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlIconButton",
+          "description": "Refuses activation, keeps focus, and shows a progress indicator named by messages.loading."
+        },
+        {
+          "name": "loadingDelay",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "SlIconButton",
+          "description": "Milliseconds before the indicator appears. Activation is refused from the start of the wait."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ButtonMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlIconButton",
+          "description": "Overrides for the strings of the active locale, key by key. loading names the progress indicator."
+        },
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlIconButton",
+          "description": "The pressed state, controlled. Binding it makes the button a toggle whose value you own."
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlIconButton",
+          "description": "The initial pressed state when the button owns it. Binding it makes the button a toggle."
+        },
+        {
+          "name": "pressedChange",
+          "type": "ChangeRequest<boolean>",
+          "defaultValue": "—",
+          "appliesTo": "SlIconButton",
+          "description": "Emits the request: value, previous value, reason (pointer or keyboard), event and cancel()."
+        },
+        {
+          "name": "type",
+          "type": "button | submit | reset",
+          "defaultValue": "button",
+          "appliesTo": "SlIconButton",
+          "description": "The native button type. Set submit only for a button that submits its form."
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "The accessible name is required: the development build throws when neither aria-label nor aria-labelledby is present, because a template cannot make an attribute mandatory.",
+        "aria-pressed is rendered only when pressed or defaultPressed is bound, so a plain icon button does not announce a toggle state it does not have.",
+        "Keep the name the same in both pressed states. The APG toggle button pattern announces the state beside an unchanging label.",
+        "A pressed icon button uses the selected colours of the theme — accent text on the accent selection background, inside the accent edge — whatever its tone and variant. On hover it uses the hover step of that background, not the neutral hover of an unpressed button.",
+        "The control is as wide as it is tall, at the control height, and never smaller than the WCAG 2.2 minimum target of 24 by 24 CSS pixels at any density.",
+        "Add a tooltip when the icon alone does not say what the action does. The accessible name does not replace a visible label."
+      ]
+    },
+    "toggleButton": {
+      "imports": {
+        "source": "import {\n  provideButtonDefaults,\n  SlButton,\n  SlButtonEnd,\n  SlButtonLink,\n  SlButtonStart,\n  SlIconButton,\n  SlToggleButton,\n} from '@slotted/angular/button';",
+        "selector": "button[slToggleButton]",
+        "exportAs": "slToggleButton"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "the button element you write",
+          "required": true,
+          "purpose": "The control. Carries data-ui=\"button\", data-tone, data-variant and data-size. It also carries data-full-width, data-disabled, data-loading and data-pressed when they apply."
+        },
+        {
+          "part": "start",
+          "element": "the element you mark with slButtonStart",
+          "required": false,
+          "purpose": "Holds the start content. Absent when nothing is marked. While loading, it holds the indicator."
+        },
+        {
+          "part": "label",
+          "element": "span",
+          "required": true,
+          "purpose": "Wraps the projected text. Always rendered, because the accessible name is computed from it. With reduced motion or forced colours, a loading button with no icon fades it in place, and it keeps its size."
+        },
+        {
+          "part": "end",
+          "element": "the element you mark with slButtonEnd",
+          "required": false,
+          "purpose": "Holds the end content. Absent when nothing is marked. While loading, it holds the indicator when there is no start content."
+        },
+        {
+          "part": "indicator",
+          "element": "span with role=\"progressbar\"",
+          "required": false,
+          "purpose": "The loading indicator. Carries data-ui=\"spinner\", is named by messages.loading, and has no value, so it reads as indeterminate. Rendered in the start box, else in the end box, else centred over the label, once loadingDelay has passed."
+        }
+      ],
+      "api": [
+        {
+          "name": "tone",
+          "type": "accent | secondary | success | warning | danger",
+          "defaultValue": "secondary",
+          "appliesTo": "SlToggleButton",
+          "description": "The semantic colour: accent for the primary action, secondary for a neutral one, and success, warning or danger for what the action does."
+        },
+        {
+          "name": "variant",
+          "type": "solid | outline | ghost",
+          "defaultValue": "outline",
+          "appliesTo": "SlToggleButton",
+          "description": "How the tone is painted: solid, outline or ghost."
+        },
+        {
+          "name": "size",
+          "type": "sm | md | lg",
+          "defaultValue": "md",
+          "appliesTo": "SlToggleButton",
+          "description": "The step of the control scale. Each step reads the --slotted-control-* tokens, so the density of the theme sets the height."
+        },
+        {
+          "name": "start",
+          "type": "[slButtonStart]",
+          "defaultValue": "—",
+          "appliesTo": "SlToggleButton",
+          "description": "Content projected before the label, such as an icon, on the element you mark with slButtonStart. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "end",
+          "type": "[slButtonEnd]",
+          "defaultValue": "—",
+          "appliesTo": "SlToggleButton",
+          "description": "Content projected after the label, on the element you mark with slButtonEnd. It mirrors in a right-to-left document."
+        },
+        {
+          "name": "fullWidth",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlToggleButton",
+          "description": "Fills the inline size of the container."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlToggleButton",
+          "description": "Refuses the action and marks the control unavailable. On its own, it sets the native disabled property, which also removes the control from the tab sequence."
+        },
+        {
+          "name": "focusableWhenDisabled",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlToggleButton",
+          "description": "Keeps a disabled control in the tab sequence: aria-disabled replaces the native property, and activation is still refused."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlToggleButton",
+          "description": "Refuses activation, keeps focus, and shows a progress indicator named by messages.loading."
+        },
+        {
+          "name": "loadingDelay",
+          "type": "number",
+          "defaultValue": "0",
+          "appliesTo": "SlToggleButton",
+          "description": "Milliseconds before the indicator appears. Activation is refused from the start of the wait."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<ButtonMessages>",
+          "defaultValue": "—",
+          "appliesTo": "SlToggleButton",
+          "description": "Overrides for the strings of the active locale, key by key. loading names the progress indicator."
+        },
+        {
+          "name": "pressed",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "SlToggleButton",
+          "description": "The pressed state, controlled. Binding it makes you the owner of the value."
+        },
+        {
+          "name": "defaultPressed",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "SlToggleButton",
+          "description": "The initial pressed state when the button owns it, read once."
+        },
+        {
+          "name": "pressedChange",
+          "type": "ChangeRequest<boolean>",
+          "defaultValue": "—",
+          "appliesTo": "SlToggleButton",
+          "description": "Emits the request: value, previous value, reason (pointer or keyboard), event and cancel()."
+        },
+        {
+          "name": "type",
+          "type": "button | submit | reset",
+          "defaultValue": "button",
+          "appliesTo": "SlToggleButton",
+          "description": "The native button type. Set submit only for a button that submits its form."
+        }
+      ],
+      "composition": [],
+      "events": [],
+      "accessibility": [
+        "SlToggleButton applies to a native button and sets aria-pressed, so it is announced as a toggle button and activates on Space and Enter.",
+        "Keep the label the same in both states: \"Mute\" stays \"Mute\" and the state is announced beside it. When the label has to change, use SlButton.",
+        "There is no [(pressed)]: a two-way binding carries only the value, and the change request also carries the reason and cancel(). One output, pressedChange, carries the whole request.",
+        "The reason is pointer when the click reports a click count and keyboard when it reports none, because a native button fires the same click for a pointer, Space and Enter.",
+        "Calling preventDefault on the click refuses the activation, and the pressed state does not change.",
+        "Use a checkbox, not SlToggleButton, for a value a form submits."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-font-weight",
+    "--slotted-control-gap-lg",
+    "--slotted-control-gap-md",
+    "--slotted-control-gap-sm",
+    "--slotted-control-height-lg",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-letter-spacing",
+    "--slotted-control-line-height",
+    "--slotted-control-padding-inline-lg",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-padding-inline-sm",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-instant",
+    "--slotted-duration-loop",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-line-height-sm",
+    "--slotted-radius-full",
+    "--slotted-space-2",
+    "--slotted-target-min",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-border",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-active",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-danger-on-solid",
+    "--slotted-tone-danger-solid",
+    "--slotted-tone-danger-solid-active",
+    "--slotted-tone-danger-solid-hover",
+    "--slotted-tone-danger-text",
+    "--slotted-tone-secondary-on-solid",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-solid-active",
+    "--slotted-tone-secondary-solid-hover",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover",
+    "--slotted-tone-secondary-text",
+    "--slotted-tone-success-on-solid",
+    "--slotted-tone-success-solid",
+    "--slotted-tone-success-solid-active",
+    "--slotted-tone-success-solid-hover",
+    "--slotted-tone-success-text",
+    "--slotted-tone-warning-on-solid",
+    "--slotted-tone-warning-solid",
+    "--slotted-tone-warning-solid-active",
+    "--slotted-tone-warning-solid-hover",
+    "--slotted-tone-warning-text"
+  ],
+  "examples": [
+    {
+      "id": "angular-button-basic",
+      "title": "An action",
+      "note": null,
+      "language": "html",
+      "source": "<button slButton (click)=\"save()\">\n  <span slButtonStart><ng-icon aria-hidden=\"true\" name=\"lucideSave\" /></span>\n  Save changes\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-button-loading",
+      "title": "Waiting for the action to finish",
+      "note": null,
+      "language": "html",
+      "source": "<button\n  slButton\n  [loading]=\"saving()\"\n  [loadingDelay]=\"300\"\n  [messages]=\"{ loading: 'Saving' }\"\n  (click)=\"save()\"\n>\n  <span slButtonStart><ng-icon aria-hidden=\"true\" name=\"lucideSave\" /></span>\n  Save changes\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-button-defaults",
+      "title": "Every action in the application, decided once",
+      "note": null,
+      "language": "ts",
+      "source": "bootstrapApplication(App, {\n  providers: [provideButtonDefaults({ size: 'sm' })],\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-button-link-native",
+      "title": "Navigating",
+      "note": null,
+      "language": "html",
+      "source": "<a slButtonLink href=\"/settings\">Open settings</a>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-button-link-router",
+      "title": "Navigation the router owns",
+      "note": null,
+      "language": "html",
+      "source": "<a slButtonLink variant=\"outline\" routerLink=\"/settings\">Open settings</a>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-icon-button-basic",
+      "title": "A named icon-only action",
+      "note": null,
+      "language": "html",
+      "source": "<button slIconButton tone=\"danger\" aria-label=\"Delete invoice\" (click)=\"remove()\">\n  <ng-icon aria-hidden=\"true\" name=\"lucideTrash2\" />\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-icon-button-toggle",
+      "title": "An icon toggle in a toolbar",
+      "note": null,
+      "language": "html",
+      "source": "<button slIconButton aria-label=\"Bold\" [pressed]=\"bold()\" (pressedChange)=\"bold.set($event.value)\">\n  <ng-icon aria-hidden=\"true\" name=\"lucideBold\" />\n</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-toggle-button-uncontrolled",
+      "title": "A toggle that owns its own state",
+      "note": null,
+      "language": "html",
+      "source": "<button slToggleButton defaultPressed>Pin</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "angular-toggle-button-controlled",
+      "title": "A toggle the consumer owns, with the reason",
+      "note": null,
+      "language": "html",
+      "source": "<button slToggleButton [pressed]=\"pinned()\" (pressedChange)=\"onPinnedChange($event)\">Pin</button>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\n\n@Component({\n  selector: 'app-button-basic',\n  imports: [SlButton],\n  template: `<button slButton type=\"button\" (click)=\"save()\">Save changes</button>`,\n})\nexport class ButtonBasic {\n  save(): void {\n    console.log('saved');\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "confirm-delete",
+      "title": "confirm-delete.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonStart } from '@slotted/angular/button';\nimport {\n  SlAlertDialog,\n  SlAlertDialogAction,\n  SlAlertDialogCancel,\n  SlAlertDialogIcon,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-button-confirm-delete',\n  imports: [\n    SlAlertDialog,\n    SlAlertDialogAction,\n    SlAlertDialogCancel,\n    SlAlertDialogIcon,\n    SlButton,\n    SlButtonStart,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlGlyph,\n    SlInline,\n    SlText,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"2\">\n      <button\n        slButton\n        tone=\"danger\"\n        variant=\"outline\"\n        focusableWhenDisabled\n        [disabled]=\"deleted()\"\n        [slDialogTrigger]=\"dialog\"\n      >\n        <span slButtonStart><svg slGlyph name=\"trash\"></svg></span>\n        Delete supplier\n      </button>\n      <sl-alert-dialog #dialog=\"slAlertDialog\" [(open)]=\"open\">\n        <header slDialogHeader>\n          <span slAlertDialogIcon></span>\n          <h2 slDialogTitle>Delete Northwind Traders?</h2>\n          <p slDialogDescription>\n            The supplier and its 18 open purchase orders are removed for everyone. This cannot be\n            undone.\n          </p>\n        </header>\n        <footer slDialogFooter>\n          <button slButton slAlertDialogCancel tone=\"secondary\" variant=\"outline\">\n            Keep supplier\n          </button>\n          <button slButton slAlertDialogAction tone=\"danger\" (click)=\"deleted.set(true)\">\n            Delete supplier\n          </button>\n        </footer>\n      </sl-alert-dialog>\n      @if (deleted()) {\n        <span slText size=\"sm\" tone=\"muted\">Northwind Traders was deleted.</span>\n        <button slButton size=\"sm\" tone=\"secondary\" variant=\"ghost\" (click)=\"deleted.set(false)\">\n          Undo\n        </button>\n      }\n    </div>\n  `,\n})\nexport class ButtonConfirmDelete {\n  readonly open = signal(false);\n  readonly deleted = signal(false);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "defaults",
+      "title": "defaults.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { provideButtonDefaults, SlButton, SlButtonStart } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\n\n@Component({\n  selector: 'app-button-defaults',\n  imports: [SlButton, SlButtonStart, SlGlyph, SlInline],\n  providers: [provideButtonDefaults({ size: 'sm', tone: 'secondary', variant: 'outline' })],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton>\n        <span slButtonStart><svg slGlyph name=\"funnel\"></svg></span>\n        Filter\n      </button>\n      <button slButton>Columns</button>\n      <button slButton>Export</button>\n      <button slButton tone=\"accent\" variant=\"solid\">\n        <span slButtonStart><svg slGlyph name=\"plus\"></svg></span>\n        New order\n      </button>\n    </div>\n  `,\n})\nexport class ButtonDefaults {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "disabled",
+      "title": "disabled.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-button-disabled',\n  imports: [SlButton, SlInline, SlStack, SlText],\n  template: `\n    <div slStack [gap]=\"2\">\n      <div slInline [gap]=\"2\">\n        <button slButton disabled tone=\"secondary\" variant=\"outline\">Export</button>\n        <button slButton aria-describedby=\"submit-hint\" disabled focusableWhenDisabled>\n          Submit for approval\n        </button>\n      </div>\n      <span slText id=\"submit-hint\" size=\"sm\" tone=\"muted\">\n        Add at least one line item before submitting.\n      </span>\n    </div>\n  `,\n})\nexport class ButtonDisabled {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "full-width",
+      "title": "full-width.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-button-full-width',\n  imports: [SlButton, SlStack],\n  template: `\n    <div slStack [gap]=\"2\">\n      <button slButton fullWidth>Pay $1,240.00</button>\n      <button slButton fullWidth tone=\"secondary\" variant=\"outline\">Pay by bank transfer</button>\n    </div>\n  `,\n})\nexport class ButtonFullWidth {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "group",
+      "title": "group.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlIconButton } from '@slotted/angular/button';\nimport { SlButtonGroup } from '@slotted/angular/button-group';\nimport { SlGlyph } from '@slotted/angular/icon';\n\n@Component({\n  selector: 'app-button-group',\n  imports: [SlButton, SlButtonGroup, SlGlyph, SlIconButton],\n  template: `\n    <div slButtonGroup aria-label=\"Invoice actions\" tone=\"secondary\" variant=\"outline\">\n      <button slButton>Edit</button>\n      <button slButton>Duplicate</button>\n      <button slButton>Send</button>\n      <button slIconButton aria-label=\"More invoice actions\">\n        <svg slGlyph name=\"ellipsis\"></svg>\n      </button>\n    </div>\n  `,\n})\nexport class ButtonGroupExample {}\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';\n\n@Component({\n  selector: 'app-button-icon-button',\n  imports: [SlGlyph, SlIconButton, SlInline],\n  template: `\n    <div slInline align=\"center\" [gap]=\"2\">\n      <button slIconButton aria-label=\"Copy invoice number\">\n        <svg slGlyph name=\"copy\"></svg>\n      </button>\n      <button slIconButton aria-label=\"Refresh balances\" variant=\"outline\">\n        <svg slGlyph name=\"rotate-ccw\"></svg>\n      </button>\n      <button slIconButton aria-label=\"Delete draft\" tone=\"danger\">\n        <svg slGlyph name=\"trash\"></svg>\n      </button>\n      <button slIconButton aria-label=\"Add note\" shape=\"circle\" tone=\"accent\" variant=\"solid\">\n        <svg slGlyph name=\"plus\"></svg>\n      </button>\n    </div>\n  `,\n})\nexport class ButtonIconButton {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "icons",
+      "title": "icons.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonEnd, SlButtonStart } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\n\n@Component({\n  selector: 'app-button-icons',\n  imports: [SlButton, SlButtonEnd, SlButtonStart, SlGlyph, SlInline],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton>\n        <span slButtonStart><svg slGlyph name=\"plus\"></svg></span>\n        New order\n      </button>\n      <button slButton tone=\"secondary\" variant=\"outline\">\n        <span slButtonStart><svg slGlyph name=\"upload\"></svg></span>\n        Import CSV\n      </button>\n      <button slButton tone=\"secondary\" variant=\"ghost\">\n        Continue to payment\n        <span slButtonEnd><svg slGlyph name=\"chevron-right\"></svg></span>\n      </button>\n    </div>\n  `,\n})\nexport class ButtonIcons {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "link",
+      "title": "link.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButtonEnd, SlButtonLink } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\n\n@Component({\n  selector: 'app-button-link',\n  imports: [SlButtonEnd, SlButtonLink, SlGlyph, SlInline],\n  template: `\n    <div slInline [gap]=\"2\">\n      <a slButtonLink href=\"/invoices/INV-2041\">\n        View invoice\n        <span slButtonEnd><svg slGlyph name=\"chevron-right\"></svg></span>\n      </a>\n      <a slButtonLink disabled href=\"/statements/2026-09.pdf\" tone=\"secondary\" variant=\"outline\">\n        Download statement\n      </a>\n    </div>\n  `,\n})\nexport class ButtonLinkExample {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "loading.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButton, SlButtonStart } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\n\n@Component({\n  selector: 'app-button-loading',\n  imports: [SlButton, SlButtonStart, SlGlyph, SlInline],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button\n        slButton\n        tone=\"secondary\"\n        variant=\"outline\"\n        [loading]=\"syncing()\"\n        [messages]=\"{ loading: 'Syncing' }\"\n        (click)=\"sync()\"\n      >\n        <span slButtonStart><svg slGlyph name=\"rotate-ccw\"></svg></span>\n        Sync inventory\n      </button>\n      <button\n        slButton\n        [loading]=\"sending()\"\n        [loadingDelay]=\"300\"\n        [messages]=\"{ loading: 'Sending' }\"\n        (click)=\"send()\"\n      >\n        Send invoice\n      </button>\n    </div>\n  `,\n})\nexport class ButtonLoading {\n  readonly syncing = signal(false);\n  readonly sending = signal(false);\n\n  sync(): void {\n    this.syncing.set(true);\n    setTimeout(() => this.syncing.set(false), 2000);\n  }\n\n  send(): void {\n    this.sending.set(true);\n    setTimeout(() => this.sending.set(false), 2000);\n  }\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "sizes",
+      "title": "sizes.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\n\n@Component({\n  selector: 'app-button-sizes',\n  imports: [SlButton, SlInline],\n  template: `\n    <div slInline align=\"center\" [gap]=\"2\">\n      <button slButton size=\"sm\">Add line item</button>\n      <button slButton size=\"md\">Add line item</button>\n      <button slButton size=\"lg\">Add line item</button>\n    </div>\n  `,\n})\nexport class ButtonSizes {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "toggle",
+      "title": "toggle.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, signal } from '@angular/core';\nimport { SlButtonStart, SlIconButton, SlToggleButton } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-button-toggle',\n  imports: [SlButtonStart, SlGlyph, SlIconButton, SlInline, SlStack, SlText, SlToggleButton],\n  template: `\n    <div slStack [gap]=\"2\">\n      <div slInline align=\"center\" [gap]=\"2\">\n        <button\n          slToggleButton\n          [pressed]=\"autoRefresh()\"\n          (pressedChange)=\"autoRefresh.set($event.value)\"\n        >\n          Auto-refresh\n        </button>\n        <button slToggleButton defaultPressed>\n          <span slButtonStart><svg slGlyph name=\"pin\"></svg></span>\n          Pin to dashboard\n        </button>\n        <button slIconButton aria-label=\"Mark as priority\" [defaultPressed]=\"false\">\n          <svg slGlyph name=\"star\"></svg>\n        </button>\n      </div>\n      <span slText size=\"sm\" tone=\"muted\">\n        {{ autoRefresh() ? 'Balances refresh every 30 seconds.' : 'Balances refresh on demand.' }}\n      </span>\n    </div>\n  `,\n})\nexport class ButtonToggle {\n  readonly autoRefresh = signal(true);\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "tones",
+      "title": "tones.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\n\n@Component({\n  selector: 'app-button-tones',\n  imports: [SlButton, SlInline, SlStack],\n  template: `\n    <div slStack [gap]=\"3\">\n      <div slInline [gap]=\"2\">\n        <button slButton>Create order</button>\n        <button slButton tone=\"secondary\">Export</button>\n        <button slButton tone=\"success\">Approve</button>\n        <button slButton tone=\"warning\">Hold shipment</button>\n        <button slButton tone=\"danger\">Void invoice</button>\n      </div>\n      <div slInline [gap]=\"2\">\n        <button slButton variant=\"outline\">Create order</button>\n        <button slButton tone=\"secondary\" variant=\"outline\">Export</button>\n        <button slButton tone=\"success\" variant=\"outline\">Approve</button>\n        <button slButton tone=\"warning\" variant=\"outline\">Hold shipment</button>\n        <button slButton tone=\"danger\" variant=\"outline\">Void invoice</button>\n      </div>\n    </div>\n  `,\n})\nexport class ButtonTones {}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "toolbar",
+      "title": "toolbar.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component } from '@angular/core';\nimport { SlButton, SlButtonStart, SlIconButton } from '@slotted/angular/button';\nimport { SlGlyph } from '@slotted/angular/icon';\nimport { SlToolbar, SlToolbarSeparator, SlToolbarSpacer } from '@slotted/angular/toolbar';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-button-toolbar',\n  imports: [\n    SlButton,\n    SlButtonStart,\n    SlGlyph,\n    SlIconButton,\n    SlText,\n    SlToolbar,\n    SlToolbarSeparator,\n    SlToolbarSpacer,\n  ],\n  template: `\n    <div slToolbar aria-label=\"Order SO-1187\">\n      <button slButton tone=\"secondary\" variant=\"ghost\">\n        <span slButtonStart><svg slGlyph name=\"file-text\"></svg></span>\n        Packing slip\n      </button>\n      <button slButton tone=\"secondary\" variant=\"ghost\">Duplicate</button>\n      <div slToolbarSeparator></div>\n      <button slIconButton aria-label=\"Copy order number\">\n        <svg slGlyph name=\"copy\"></svg>\n      </button>\n      <button\n        slIconButton\n        aria-describedby=\"delete-reason\"\n        aria-label=\"Delete order\"\n        disabled\n        focusableWhenDisabled\n        tone=\"danger\"\n      >\n        <svg slGlyph name=\"trash\"></svg>\n      </button>\n      <div slToolbarSpacer></div>\n      <span slText id=\"delete-reason\" size=\"sm\" tone=\"muted\">\n        Shipped orders cannot be deleted.\n      </span>\n    </div>\n  `,\n})\nexport class ButtonToolbar {}\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';\n\n@Component({\n  selector: 'app-button-variants',\n  imports: [SlButton, SlInline],\n  template: `\n    <div slInline [gap]=\"2\">\n      <button slButton>Publish invoice</button>\n      <button slButton tone=\"secondary\" variant=\"outline\">Save draft</button>\n      <button slButton tone=\"secondary\" variant=\"ghost\">Discard</button>\n    </div>\n  `,\n})\nexport class ButtonVariants {}\n",
+      "verdict": "example"
+    }
+  ]
+}