{
  "generatedFrom": "result.contract.json",
  "component": "Result",
  "slug": "result",
  "group": "Feedback",
  "tier": "leaf-lit",
  "summary": "A full-block outcome state — success, error, info, warning, 404, 403 or 500 — with an icon, title and actions.",
  "install": {
    "package": "@ahaslides-product/design",
    "registry": "https://npm.pkg.github.com",
    "scope": "@ahaslides-product",
    "auth": "Published to GitHub Packages — needs a GitHub token with read:packages. Configure the @ahaslides-product scope in .npmrc before installing.",
    "npmrc": "@ahaslides-product:registry=https://npm.pkg.github.com\n//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}   # a GitHub token with read:packages",
    "command": "npm i @ahaslides-product/design",
    "tokenLayer": "import '@ahaslides-product/design/tokens.css';",
    "import": "import '@ahaslides-product/design/aha-result';",
    "element": "aha-result",
    "registers": "aha-result"
  },
  "feeds": {
    "doc": "https://ahaslides-product.github.io/ahaslides-design/result/index.html",
    "md": "https://ahaslides-product.github.io/ahaslides-design/result/result.md",
    "agentJson": "https://ahaslides-product.github.io/ahaslides-design/result.agent.json",
    "llms": "https://ahaslides-product.github.io/ahaslides-design/result.llms.txt",
    "index": "https://ahaslides-product.github.io/ahaslides-design/llms.txt"
  },
  "recommendedSnippet": "html",
  "vibeCode": "Emit the HTML snippet by default — <aha-result> is a standard custom element that renders on open — React/Vue are thin adapters over the same element. Paste into an .html file and it renders with no build step.",
  "frameworks": {
    "react": {
      "via": "web-component",
      "ref": "aha-result"
    },
    "vue": {
      "via": "web-component",
      "ref": "aha-result"
    },
    "html": {
      "via": "web-component",
      "ref": "aha-result",
      "runnable": "paste-and-run — no build step, renders on open"
    }
  },
  "props": [
    {
      "name": "status",
      "type": "success | error | info | warning | 404 | 403 | 500",
      "default": "info",
      "desc": "Outcome — picks the glyph and colour"
    },
    {
      "name": "result-title",
      "type": "string",
      "default": "—",
      "desc": "The headline message"
    },
    {
      "name": "subtitle",
      "type": "string",
      "default": "—",
      "desc": "Optional supporting line under the title"
    },
    {
      "name": "icon",
      "type": "string (DS icon name)",
      "default": "—",
      "desc": "Overrides the status glyph with any DS icon (e.g. system-shield-warning)"
    }
  ],
  "tokens": [
    "color-primary",
    "color-success",
    "color-error",
    "color-warning",
    "color-info",
    "text-default",
    "text-tertiary"
  ],
  "spec": [
    {
      "label": "Icon",
      "value": "48px DS glyph, coloured by status (or an `icon` override)"
    },
    {
      "label": "Success",
      "value": "check-circle · #16C49A"
    },
    {
      "label": "Error / 500",
      "value": "x-circle / cloud-disconnected · #F5222D"
    },
    {
      "label": "Warning / 403",
      "value": "warning-circle / lock · #FF7747"
    },
    {
      "label": "Info / 404",
      "value": "info / magnifying-glass · #9BB3E9"
    },
    {
      "label": "Title",
      "value": "24/32 SemiBold #1A1A1A, centred"
    },
    {
      "label": "Subtitle",
      "value": "14/21 Regular #8A8A8A"
    }
  ],
  "opinion": {
    "whenToUse": [
      {
        "what": "Result",
        "when": "a full-block outcome after an operation or a not-found/empty route (with a next action)"
      },
      {
        "what": "Alert",
        "when": "an inline, in-context banner that stays in the layout (feedback pattern)"
      },
      {
        "what": "Toast",
        "when": "a transient, auto-dismissing confirmation"
      }
    ],
    "note": "Reserve Result for a whole-region outcome — lead with the glyph + a clear title, keep the subtitle to one line, and give a primary next action in slot=\"extra\". For an in-context message use an Alert; for a transient confirmation use a Toast.",
    "dsv3": "COVERED — DS V3 has no measured Result component-set (a Figma search for Result/Empty state/Status page on MwjvUjVI0HnfwD9EwPXRAy returns only unrelated legacy/mockup nodes). The matrix is therefore derived from antd Result conventions + the token layer (status colours color-success/error/warning/info, error reused for 500, warning for 403) + the DS icon library (check-circle, x-circle, warning-circle, info, magnifying-glass-exclamation, lock, cloud-disconnected). Full status axis success/error/info/warning/404/403/500 plus a custom `icon` override. A deliberate, documented extension."
  },
  "surfaces": [
    "editor",
    "dashboard",
    "audience"
  ],
  "snippets": {
    "html": "<!-- Paste-and-run: save as .html and open in a browser. No build step.\n     <aha-result> is the SAME shared custom element React and Vue consume — here in its native\n     form. Its status glyph is the shared <aha-icon>, loaded automatically by the element.\n     Theming comes only from the --aha-* tokens in tokens.css. -->\n<link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/tokens.css\">\n<script type=\"module\">\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-result.js';   // registers <aha-result> (+ <aha-icon>)\n  import 'https://cdn.jsdelivr.net/gh/ahaslides-product/ahaslides-design@master/lib/aha-button.js';   // registers <aha-button>\n</script>\n\n<!-- status: success | error | info | warning | 404 | 403 | 500 -->\n<aha-result status=\"success\" result-title=\"Presentation published\" subtitle=\"Share the join link with your audience.\">\n  <aha-button slot=\"extra\" variant=\"primary\">Copy join link</aha-button>\n</aha-result>\n\n<!-- a not-found / forbidden / server route -->\n<aha-result status=\"404\" result-title=\"Presentation not found\" subtitle=\"It may have been deleted or the link is wrong.\">\n  <aha-button slot=\"extra\" variant=\"primary\">Back to dashboard</aha-button>\n</aha-result>\n\n<!-- override the status glyph with any DS icon by name -->\n<aha-result status=\"warning\" icon=\"system-shield-warning\" result-title=\"Verify your account\"\n  subtitle=\"Confirm your email to keep presenting.\"></aha-result>\n",
    "react": "import '@ahaslides-product/design/aha-result';   // registers <aha-result> (+ <aha-icon>)\nimport '@ahaslides-product/design/aha-button';\n\n// Attributes only — no events — so React 18/19 can render the element directly.\nfunction AhaResult({ status, title, subtitle, children }) {\n  return (\n    <aha-result status={status} result-title={title} subtitle={subtitle}>\n      {children}\n    </aha-result>\n  );\n}\n\n// usage\n<AhaResult status=\"success\" title=\"Presentation published\" subtitle=\"Share the join link with your audience.\">\n  <aha-button slot=\"extra\" variant=\"primary\">Copy join link</aha-button>\n</AhaResult>\n",
    "vue": "// main.ts — register the elements + mark aha-* as custom elements\nimport '@ahaslides-product/design/aha-result';   // registers <aha-result> (+ <aha-icon>)\nimport '@ahaslides-product/design/aha-button';\napp.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('aha-');\n\n// Component.vue\n<template>\n  <aha-result\n    status=\"success\"\n    result-title=\"Presentation published\"\n    subtitle=\"Share the join link with your audience.\"\n  >\n    <aha-button slot=\"extra\" variant=\"primary\">Copy join link</aha-button>\n  </aha-result>\n</template>\n"
  }
}