Components

The substrate ships HTML+CSS+ARIA component recipes — framework-agnostic by construction. Every recipe is consumable via the shadcn-compatible registry, the JSON API, the POST /mcp Model Context Protocol endpoint, or the Git source.

All components

• Badge

  A small, inline status indicator. Carries a short label and a tone.

• Brand-Family Swatch

  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).

• Breadcrumb

  Hierarchy trail to the current page. Useful when nested deeper than two levels.

• Button

  A trigger that initiates an action. Five variants — primary, secondary, ghost, critical, link — each with its own emphasis and use context.

• Checkbox

  Boolean choice. Use when each option is independent of the others.

• Chip Row

  Inline horizontal chip group with semantic variants. Each chip carries a small monospace label prefix + value, rendered as an inline-flex element with constrained height and consistent border-radius.

• Citation Authority Ribbon

  Source-type differentiation badges on references section entries. Six fixed source classes — academic (A, blue) / regulator (R, green) / industry (I, warm-gray) / direct-source (D, teal) / news (N, cool-gray) / web-informal (W, outline). data-source-authority attribute is the canonical machine-readable surface. JSON-LD @type refinement on citation entries. Addresses Wikipedia's flat numeric references list weakness.

• Code Block with Copy

  Pre-formatted code block with an inset copy-to-clipboard button that fades in on hover. Uses navigator.clipboard.writeText with a textarea fallback. 'Copied' indicator shows for 1.4 s then reverts.

• Country Filter Chips

  Horizontal radiogroup of country chips that filter map data and flyTo the selected country's bounds. Default state is ALL (no filter, world view). Single exclusive selection; future multi-select variant planned. Reference implementation: gis.woodfinegroup.com (v0.1.94).

• Edit on GitHub Link

  Footer link to the source markdown of the current page on GitHub. Surfaces the substrate's open-source posture and invites contribution. Typically rendered as a small secondary link with a pencil icon or 'Edit this page' label.

• Empty State Card

  Dashed-border card for surfaces with no data yet. Title in display-serif; body in body-sans; optional inline links separated by whitespace (not bullets). Used for index pages with no entries, dashboard panels awaiting data, and search results with no matches.

• Freshness Ribbon

  Per-section last-content-review date badge on each section heading (right end, after [edit] pencil). Three-stop colour scale: fresh (green, ≤90 days) / stale (amber, 91–365 days) / archived (gray, >365 days). Data source: git-blame at section level (excluding whitespace-only commits) or frontmatter content_reviewed_on override. dateModified per-section WebPageElement JSON-LD emission.

• Home Grid

  9-card responsive category browse grid for the documentation wiki home page. Always renders all 9 ratified categories regardless of article count — including empty categories with '0 articles — in preparation' placeholder. 3-col → 2-col (960px) → 1-col (640px). Carbon Tile pattern extended with a top-3 child list + 'More →' link per card.

• Text input

  Single-line text entry with label, helper text, and error state.

• Link

  A navigation primitive — moves the user to a destination without state change.

• Machine Surface Footer

  Three-column footer for PointSav machine surfaces (design.pointsav.com, showcase instances, etc.). Columns: brand identity (left), machine surface links (/tokens.json, /components, /research, /healthz), substrate provenance (Doctrine claims, standards floor). Small monospace section headings (11 px caps); body at 14 px; canonical-URL base bar at 12 px muted monospace.

• Map Side Drawer

  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).

• Map Stats Panel

  Floating data-display panel showing aggregate statistics for the current filtered map view. Always visible; updates reactively when filters (country chips, family checkboxes) change. Positioned top-right to avoid collision with map zoom controls. Reference implementation: gis.woodfinegroup.com (v0.1.94).

• Navigation bar

  Page-level navigation header. Logo, primary nav, optional actions, optional account menu.

• Notification

  Inline messaging — informational, positive, caution, critical. Toast variant subsequent milestone.

• Preview Frame

  Bordered surface for previewing component recipes. Carries a data-theme attribute (light/dark) on the container. Toolbar with two toggle buttons in the top-right; JS flips data-theme and updates aria-pressed on each toggle.

• Research Trail Footer

  Collapsible bottom-of-article epistemic-frontier disclosure. Three fixed subsections: Research done / Suggested research / Open questions. Collapsed by default; summary line shows counts ('N done · N suggested · N open question(s)'). Native <details>/<summary> — no JS needed. Emits JSON-LD potentialAction nodes (SearchAction + Question). Doctrine claim #39 at article scale.

• Select

  Single-choice picker from a known list. Native <select> element for keyboard + screen-reader behaviour out of the box.

• Sidebar Accordion

  Collapsible categorised left-rail navigation. Sections labelled with small monospace caps; items as horizontally-padded links with an active state (2 px left border in brand accent + soft accent-tint background).

• Surface

  A container that groups related content. Three elevation levels — subtle, base, elevated — communicate visual hierarchy without coupling to specific use cases.

• Switch

  On/off toggle for settings that take effect immediately. Use when the action is reversible and binary.

• Tab

  URL-reflected page-section navigation. Each tab is a separate route; state lives in the URL, not in client memory.

• Tab Bar (Disclosure)

  Tabs implemented as <details> elements, progressively enhanced by JS to behave as a tabset (opening one closes others; deep-link via #fragment). Zero-JS baseline: all panels accessible via expand/collapse. Distinct from ps-tab (URL-reflected routing pattern) — use this when content is in-page and JS may be unavailable.

• Wiki Article Footer

  Bottom-of-article surface: category tags, references/citations section, and an edit-on-github link. Separates editorial metadata from article body.

• Wiki Article Header

  Top-of-article surface: slug breadcrumb, H1 title (from frontmatter), quality badge, and byline (last edited + editor + history link). Maps Wikipedia article-header muscle-memory using IBM Plex Sans at 2.25rem h1.

• Wiki Badge / Tag

  Dual-purpose chip: (1) article quality grade (Featured/Good/A/B/C/Stub), (2) category tag links. Inline, pill-shaped. Used by wiki-article-header (quality badge) and wiki-article-footer (category tags).

• Wiki Dark Mode Toggle

  Button that toggles data-theme='dark' on the <html> element and persists the choice in localStorage. Initialises from localStorage on load, then falls back to prefers-color-scheme.

• Wiki Drawer (Mobile Navigation)

  Slide-in overlay navigation for compact (≤799px) viewports. Hamburger trigger opens a full-height left drawer containing the wiki site nav. Uses HTML inert attribute to lock the background DOM.

• Wiki Modal Dialog

  Native <dialog> element modal with showModal() focus trap. Used for image lightbox, search overlay, and confirmation prompts. Dismisses on Escape or backdrop click.

• Wiki Pagination (Prev/Next)

  Prev/Next article navigation within a wiki category. Three-column grid: prev article (left), category link (centre), next article (right). NOT numbered-page pagination. Keyboard navigable via native <a> elements.

• Wiki Search Results

  Ordered list of search hits: article title link + plain-text excerpt (~180 chars). Zero-results state with a prompt to try different terms. Backed by the Tantivy JSON-RPC endpoint at /mcp (see research note).

• Wiki Table of Contents Sidebar

  Sticky right-rail sidebar listing article headings (H2/H3). Active section highlighted via IntersectionObserver. Collapses to an inline toggle on compact viewports.