{
  "id": "evidence-office-registry-search",
  "name": "Registry Search",
  "theme": "evidence-office",
  "category": "Search & Browse",
  "description": "Structured search where the query is built from removable criterion chips, so it is always obvious what is filtering the result set.",
  "layout": "Full-width query builder band with chips and an add-criterion control, results as a compact table below, and a saved-searches strip pinned to the bottom.",
  "modules": [
    {
      "key": "query",
      "name": "Query builder",
      "html": "\n<div class=\"qb\">\n  <label for=\"eo-rs-q\">Search the registry</label>\n  <div class=\"qb-row\"><input id=\"eo-rs-q\" type=\"search\" placeholder=\"Reference, address or applicant\"><button type=\"button\" class=\"pri\">Search</button></div>\n  <div class=\"chips\">\n    <span class=\"chip\">Ward <b>Bramley &amp; Stanningley</b><button type=\"button\" aria-label=\"Remove ward filter\">×</button></span>\n    <span class=\"chip\">Received <b>after 01 Jan 2026</b><button type=\"button\" aria-label=\"Remove date filter\">×</button></span>\n    <span class=\"chip\">Status <b>not Issued</b><button type=\"button\" aria-label=\"Remove status filter\">×</button></span>\n    <button type=\"button\" class=\"chip-add\">+ Add criterion</button>\n  </div>\n</div>"
    },
    {
      "key": "results",
      "name": "Result table",
      "html": "\n<div class=\"rs\">\n  <div class=\"rs-head\"><strong>41</strong> records<span class=\"rs-sp\"></span><span>Sorted by received, newest first</span></div>\n  <table>\n    <thead><tr><th scope=\"col\">Ref</th><th scope=\"col\">Address</th><th scope=\"col\">Applicant</th><th scope=\"col\">Received</th><th scope=\"col\">Status</th></tr></thead>\n    <tbody>\n      <tr><td class=\"ref\">C-4491</td><td>18 Beckett Road</td><td>H. Lindqvist</td><td class=\"num\">14 Jul</td><td>Received</td></tr>\n      <tr><td class=\"ref\">C-4471</td><td>4 Bramley Lane</td><td>Northgate Ltd</td><td class=\"num\">13 Jun</td><td>Review</td></tr>\n      <tr><td class=\"ref\">C-4468</td><td>Halifax Mill, Unit 2</td><td>Halifax Mill LLP</td><td class=\"num\">09 Jun</td><td>Evidence</td></tr>\n      <tr><td class=\"ref\">C-4455</td><td>27 Ash Grove</td><td>P. Sandhu</td><td class=\"num\">28 May</td><td>Decision</td></tr>\n      <tr><td class=\"ref\">C-4441</td><td>Northfield Depot</td><td>City Works</td><td class=\"num\">19 May</td><td>Decision</td></tr>\n    </tbody>\n  </table>\n</div>"
    },
    {
      "key": "saved",
      "name": "Saved searches",
      "html": "\n<footer class=\"saved\"><span class=\"saved-k\">Saved</span><a href=\"#\">Overdue in my wards</a><a href=\"#\">Listed consent, open</a><a href=\"#\">Appeals lodged this FY</a><button type=\"button\">Save this search</button></footer>"
    }
  ],
  "moduleCount": 3,
  "reorderable": true,
  "meta": {
    "id": "evidence-office-registry-search",
    "model": "Claude Opus 5",
    "author": "Claude Code",
    "createdAt": "2026-08-29T18:23:29+09:00",
    "updatedAt": "2026-08-29T18:23:29+09:00",
    "version": "1.0.0",
    "isNew": false
  },
  "link": "/api/v1/designs/evidence-office-registry-search.json",
  "structure": "Full-width query builder band with chips and an add-criterion control, results as a compact table below, and a saved-searches strip pinned to the bottom.",
  "html": "<div class=\"dz dz-evidence-office-registry-search\" data-design=\"evidence-office-registry-search\" data-theme=\"evidence-office\">\n<section class=\"dz-mod\" data-mod=\"query\" aria-label=\"Query builder\">\n<div class=\"qb\">\n  <label for=\"eo-rs-q\">Search the registry</label>\n  <div class=\"qb-row\"><input id=\"eo-rs-q\" type=\"search\" placeholder=\"Reference, address or applicant\"><button type=\"button\" class=\"pri\">Search</button></div>\n  <div class=\"chips\">\n    <span class=\"chip\">Ward <b>Bramley &amp; Stanningley</b><button type=\"button\" aria-label=\"Remove ward filter\">×</button></span>\n    <span class=\"chip\">Received <b>after 01 Jan 2026</b><button type=\"button\" aria-label=\"Remove date filter\">×</button></span>\n    <span class=\"chip\">Status <b>not Issued</b><button type=\"button\" aria-label=\"Remove status filter\">×</button></span>\n    <button type=\"button\" class=\"chip-add\">+ Add criterion</button>\n  </div>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"results\" aria-label=\"Result table\">\n<div class=\"rs\">\n  <div class=\"rs-head\"><strong>41</strong> records<span class=\"rs-sp\"></span><span>Sorted by received, newest first</span></div>\n  <table>\n    <thead><tr><th scope=\"col\">Ref</th><th scope=\"col\">Address</th><th scope=\"col\">Applicant</th><th scope=\"col\">Received</th><th scope=\"col\">Status</th></tr></thead>\n    <tbody>\n      <tr><td class=\"ref\">C-4491</td><td>18 Beckett Road</td><td>H. Lindqvist</td><td class=\"num\">14 Jul</td><td>Received</td></tr>\n      <tr><td class=\"ref\">C-4471</td><td>4 Bramley Lane</td><td>Northgate Ltd</td><td class=\"num\">13 Jun</td><td>Review</td></tr>\n      <tr><td class=\"ref\">C-4468</td><td>Halifax Mill, Unit 2</td><td>Halifax Mill LLP</td><td class=\"num\">09 Jun</td><td>Evidence</td></tr>\n      <tr><td class=\"ref\">C-4455</td><td>27 Ash Grove</td><td>P. Sandhu</td><td class=\"num\">28 May</td><td>Decision</td></tr>\n      <tr><td class=\"ref\">C-4441</td><td>Northfield Depot</td><td>City Works</td><td class=\"num\">19 May</td><td>Decision</td></tr>\n    </tbody>\n  </table>\n</div></section>\n<section class=\"dz-mod\" data-mod=\"saved\" aria-label=\"Saved searches\">\n<footer class=\"saved\"><span class=\"saved-k\">Saved</span><a href=\"#\">Overdue in my wards</a><a href=\"#\">Listed consent, open</a><a href=\"#\">Appeals lodged this FY</a><button type=\"button\">Save this search</button></footer></section>\n</div>",
  "css": "\n.dz-evidence-office-registry-search { background: var(--background); color: var(--foreground); font-family: var(--pv-body); display: flex; flex-direction: column; min-height: 520px; }\n.dz-evidence-office-registry-search .qb { padding: 22px 26px 16px; border-bottom: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-registry-search .qb label { display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: 8px; }\n.dz-evidence-office-registry-search .qb-row { display: flex; gap: 8px; max-width: 42rem; }\n.dz-evidence-office-registry-search .qb-row input { flex: 1; min-width: 0; font: inherit; font-size: 14.5px; padding: 10px 13px; border: var(--pv-bw) solid var(--input); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); }\n.dz-evidence-office-registry-search .qb-row input:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }\n.dz-evidence-office-registry-search .qb-row .pri { font: inherit; font-size: 13.5px; padding: 10px 22px; border: var(--pv-bw) solid var(--primary); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--primary); cursor: pointer; transition: background var(--dur) var(--ease); }\n.dz-evidence-office-registry-search .qb-row .pri:hover { background: var(--secondary); }\n.dz-evidence-office-registry-search .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }\n.dz-evidence-office-registry-search .chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted-foreground); border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); padding: 5px 6px 5px 10px; background: var(--muted); }\n.dz-evidence-office-registry-search .chip b { font-weight: 500; color: var(--foreground); }\n.dz-evidence-office-registry-search .chip button { font: inherit; font-size: 14px; line-height: 1; background: none; border: 0; color: var(--muted-foreground); cursor: pointer; padding: 0 4px; }\n.dz-evidence-office-registry-search .chip button:hover { color: var(--destructive); }\n.dz-evidence-office-registry-search .chip-add { font: inherit; font-size: 12px; padding: 5px 11px; border: var(--pv-bw) dashed var(--border); border-radius: var(--pv-radius-sm); background: none; color: var(--primary); cursor: pointer; }\n.dz-evidence-office-registry-search .rs { padding: 16px 26px 8px; flex: 1; }\n.dz-evidence-office-registry-search .rs-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--muted-foreground); padding-bottom: 9px; }\n.dz-evidence-office-registry-search .rs-head strong { font-family: var(--pv-mono); font-size: 18px; color: var(--foreground); }\n.dz-evidence-office-registry-search .rs-sp { flex: 1; }\n.dz-evidence-office-registry-search table { width: 100%; border-collapse: collapse; font-size: 13.5px; }\n.dz-evidence-office-registry-search th { text-align: left; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 500; padding: 9px 12px 9px 0; border-top: var(--pv-bw) solid var(--foreground); border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-registry-search td { padding: 10px 12px 10px 0; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-registry-search tbody tr { transition: background var(--dur) var(--ease); }\n.dz-evidence-office-registry-search tbody tr:hover { background: var(--secondary); }\n.dz-evidence-office-registry-search .ref { font-family: var(--pv-mono); color: var(--primary); }\n.dz-evidence-office-registry-search .num { font-family: var(--pv-mono); color: var(--muted-foreground); }\n.dz-evidence-office-registry-search .saved { display: flex; align-items: center; gap: 16px; padding: 12px 26px; border-top: var(--pv-bw) solid var(--foreground); }\n.dz-evidence-office-registry-search .saved-k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-foreground); }\n.dz-evidence-office-registry-search .saved a { font-size: 12.5px; color: var(--foreground); text-decoration: none; border-bottom: var(--pv-bw) solid var(--border); }\n.dz-evidence-office-registry-search .saved a:hover { color: var(--primary); border-bottom-color: var(--primary); }\n.dz-evidence-office-registry-search .saved button { margin-left: auto; font: inherit; font-size: 12px; padding: 6px 13px; border: var(--pv-bw) solid var(--border); border-radius: var(--pv-radius-sm); background: var(--card); color: var(--foreground); cursor: pointer; }\n@media (prefers-reduced-motion: reduce) { .dz-evidence-office-registry-search *, .dz-evidence-office-registry-search *::before, .dz-evidence-office-registry-search *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; } }",
  "requiredTheme": "/api/v1/themes/evidence-office.json",
  "googleFontsHref": "https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600;700&display=swap"
}