{"component":{"aria":"role='complementary' + aria-label='<feature-type> details'. h2 inside drawer is the secondary heading. Close button: <button aria-label='Close details'>. Brand badge: aria-label states family name. aria-modal='false' — map stays interactive. Focus trap: Tab cycles within drawer while open; ESC dismisses and returns focus to map canvas.","category":"map","css":".ps-map-drawer { position: absolute; inset-block: 0; inset-inline-end: 0; width: 340px; background: var(--pds-surface-layer); border-inline-start: 1px solid var(--pds-border-subtle); box-shadow: -2px 0 8px rgba(0,0,0,0.12); overflow-y: auto; transform: translateX(100%); transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 10; }\n.ps-map-drawer:not([hidden]) { transform: translateX(0); }\n@media (prefers-reduced-motion: reduce) { .ps-map-drawer { transition: opacity 150ms ease; } }\n.ps-map-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; padding: var(--pds-space-2); border-block-end: 1px solid var(--pds-border-subtle); }\n.ps-map-drawer__title { font-size: 1.0625rem; font-weight: 600; color: var(--pds-text-primary); margin: 0; }\n.ps-map-drawer__close { background: transparent; border: none; cursor: pointer; font-size: 1.25rem; color: var(--pds-text-secondary); padding: var(--pds-space-05); }\n.ps-map-drawer__facts { display: grid; grid-template-columns: auto 1fr; gap: var(--pds-space-05) var(--pds-space-2); padding: var(--pds-space-2); margin: 0; }\n.ps-map-drawer__facts dt { color: var(--pds-text-secondary); font-size: 0.8125rem; }\n.ps-map-drawer__facts dd { color: var(--pds-text-primary); font-size: 0.875rem; margin: 0; }","description":"Persistent right-side info drawer for map feature detail. Slides in on feature click; stays visible while map remains interactive. Replaces popup-on-marker pattern with a complementary panel. Reference implementation: gis.woodfinegroup.com (v0.1.94).","display_name":"Map Side Drawer","html":"<aside class=\"ps-map-drawer\" role=\"complementary\" aria-label=\"{{feature-type}} details\">\n  <div class=\"ps-map-drawer__surface\">\n    <header class=\"ps-map-drawer__header\">\n      <div class=\"ps-map-drawer__title-block\">\n        <span class=\"ps-brand-badge\" aria-label=\"{{brand-family}}\">{{brand-code}}</span>\n        <h2 class=\"ps-map-drawer__title\">{{feature-name}}</h2>\n      </div>\n      <button type=\"button\" class=\"ps-map-drawer__close\" aria-label=\"Close details\">×</button>\n    </header>\n    <dl class=\"ps-map-drawer__facts\">\n      <dt>Address</dt><dd>{{address}}</dd>\n      <dt>NAICS</dt><dd>{{naics}}</dd>\n      <dt>Open</dt><dd>{{year-opened}}</dd>\n    </dl>\n    <div class=\"ps-map-drawer__cluster-context\" hidden>\n      <span class=\"ps-map-drawer__cluster-label\">Within cluster {{cluster-id}}</span>\n      <span class=\"ps-map-drawer__cluster-meta\">{{anchor-count}} anchors · {{max-radius}}m max radius</span>\n    </div>\n  </div>\n</aside>","name":"map-side-drawer","registry_type":"component","research_links":["research/zoom-tier-reveal-pattern.md"],"tabs_available":[],"variants":[{"css_class":"","description":"Single-feature detail — current GIS use.","html":"","name":"default","tokens":[]},{"css_class":"","description":"Split drawer with two features side-by-side; for federated cluster comparison (Doctrine invention #9). Decision pending.","html":"","name":"comparison","tokens":[]}],"wcag":{"target":"2.2 AA"}},"tenant":"pointsav","theme":"pointsav-brand"}