{"component":{"aria":"aria-label on the swatch element states the family name. Dot is aria-hidden='true'; label carries the semantic meaning. Colour is supplementary — label is the primary signifier. forced-colors: dots collapse to user link colour; labels remain.","category":"map","css":".ps-swatch { display: inline-flex; align-items: center; gap: var(--pds-space-05); padding: 0.2em 0.5em; border-radius: var(--pds-radius-sm); font-size: 0.8125rem; }\n.ps-swatch__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--ps-brand-family-color, currentColor); }\n.ps-swatch--department .ps-swatch__dot { background-color: var(--ps-brand-family-department-color, #0B5FFF); }\n.ps-swatch--hardware .ps-swatch__dot { background-color: var(--ps-brand-family-hardware-color, #FF6B00); }\n.ps-swatch--warehouse-club .ps-swatch__dot { background-color: var(--ps-brand-family-warehouse-club-color, #00875A); }\n.ps-swatch--map-marker .ps-swatch__dot { width: 24px; height: 24px; }\n.ps-swatch--map-marker .ps-swatch__label { position: absolute; clip: rect(0 0 0 0); clip-path: inset(50%); }\n@media (forced-colors: active) { .ps-swatch__dot { background-color: LinkText; } }","description":"Taxonomic swatch rendering a brand-family identifier as a coloured dot + label chip. Visual primitive for the Department / Hardware / Warehouse Club retail taxonomy. Taxonomy-agnostic: customers can extend via runtime taxonomy file (leapfrog invention #5). Reference implementation: gis.woodfinegroup.com (v0.1.94).","display_name":"Brand-Family Swatch","html":"<span class=\"ps-swatch ps-swatch--{{family-id}}\" aria-label=\"{{family-label}}\">\n  <span class=\"ps-swatch__dot\" aria-hidden=\"true\"></span>\n  <span class=\"ps-swatch__label\">{{family-label}}</span>\n</span>","name":"brand-family-swatch","registry_type":"component","research_links":["research/zoom-tier-reveal-pattern.md"],"tabs_available":[],"variants":[{"css_class":"","description":"Default. Dot + label chip.","html":"","name":"inline-chip","tokens":[]},{"css_class":"","description":"Large dot (24-32px); label suppressed (label via parent tooltip/drawer).","html":"","name":"map-marker","tokens":[]},{"css_class":"","description":"Concentric arrangement of N family dots showing family distribution in a cluster. Renders at zoom < 8.5; crossfades to individual swatches above zoom 8.","html":"","name":"cluster-centroid-ring","tokens":[]},{"css_class":"","description":"Paired with checkbox primitive: [✓] [●] Department.","html":"","name":"filter-row","tokens":[]},{"css_class":"","description":"Dot fills behind brand short-code (e.g., HD for Home Depot).","html":"","name":"drawer-header-badge","tokens":[]}],"wcag":{"target":"2.2 AA"}},"tenant":"pointsav","theme":"pointsav-brand"}