{
  "schemaVersion": 1,
  "type": "resource",
  "id": "colorion-gradient-buttons",
  "evaluation": {
    "reviewedOn": "2026-10-19",
    "status": "checked",
    "modes": [
      "http",
      "browser",
      "local-fixture"
    ],
    "summary": "The Sea Blue sample shifted its gradient on hover and activated by keyboard in a local native-button wrapper. Its CSS removed the keyboard outline, leaving one unmet focus expectation.",
    "reportUrl": "/design-evaluations/resource-colorion-gradient-buttons.json",
    "identity": {
      "target": "colorion-gradient-buttons first public CSS sample",
      "version": "unversioned generated sample",
      "integrity": "sha256:4fdf9b8a7cf0ffc8f834d1f8b0095cbaf70002ba38da68245df18f91bbc0675b"
    },
    "environment": [
      "Chromium 155.0.8059.82 on Windows; fresh temporary profile and fresh account-free contexts.",
      "Public HTTPS GET/HEAD requests only; telemetry/auth routes and WebSockets blocked. No account storage or credential environment variables.",
      "Synthetic local inputs only. Package/skill source inspected before execution; no install lifecycle scripts run.",
      "Local package/CSS browser fixtures block real network. Variate additionally uses Node filesystem permissions and a no-network preload."
    ],
    "tests": [
      {
        "name": "Public document and DOM",
        "mode": "browser",
        "method": "Fresh Chromium GET, then inspect rendered controls after hydration delay",
        "result": "pass",
        "observation": "HTTP 200; 70 captured button labels; 1 inputs; 0 canvases."
      },
      {
        "name": "CSS sample generation",
        "mode": "browser",
        "method": "Open first CSS disclosure and inspect code or captured copy output; system clipboard is not written",
        "result": "pass",
        "observation": "Captured 470 UTF-8 bytes; SHA256 4fdf9b8a7cf0ffc8f834d1f8b0095cbaf70002ba38da68245df18f91bbc0675b. This verifies disclosed/generated output, not OS clipboard permission."
      },
      {
        "name": "Gradient hover response",
        "mode": "local-fixture",
        "method": "Read background position before and after pointer hover",
        "result": "pass",
        "observation": "{\"before\": \"0% 0%\", \"after\": \"100% 50%\"}"
      },
      {
        "name": "Native keyboard activation",
        "mode": "local-fixture",
        "method": "Tab to authored button and press Enter; inspect local click counter",
        "result": "pass",
        "observation": "{\"focused\": true, \"clicks\": 1, \"outlineStyle\": \"none\", \"outlineWidth\": \"3px\"}"
      },
      {
        "name": "Visible focus boundary",
        "mode": "local-fixture",
        "method": "Inspect computed keyboard focus outline",
        "result": "fail",
        "observation": "{\"focused\": true, \"clicks\": 1, \"outlineStyle\": \"none\", \"outlineWidth\": \"3px\"}"
      }
    ],
    "security": {
      "scope": "Passive inspection of the public response headers, requested hosts and the named browser sample. Also inspected pinned source and the specified synthetic fixture outputs. No active exploitation, authenticated permissions test or complete security audit.",
      "findings": [
        {
          "level": "concern",
          "basis": "observed",
          "title": "Copied CSS suppresses the keyboard outline",
          "detail": "The sample includes outline:none. The focused fixture reported outline-style none even though Enter activated the button. Add a visible focus treatment before use."
        }
      ],
      "limits": [
        "No authenticated workspace, private content, production backend permissions or data-retention verification.",
        "One generated sample only; no complete gallery, touch, forced-colors or contrast audit. The native click handler belongs to the authored fixture."
      ]
    },
    "practicalCaveats": [
      "Restore a clear :focus-visible ring and check contrast at both ends of the gradient.",
      "Pin and recheck the selected version or sample before adoption; the observations apply only to the scope and date shown."
    ],
    "limits": [
      "One generated sample only; no complete gallery, touch, forced-colors or contrast audit. The native click handler belongs to the authored fixture.",
      "Fresh-browser restrictions can affect external assets and hydration. Initial failed selectors and limited probes remain in the evidence; they are not blanket product failures."
    ],
    "sources": [
      {
        "label": "Primary public resource",
        "url": "https://gradientbuttons.colorion.co/"
      }
    ]
  }
}