@a11y-context/mcp-server 0.1.0

package/corpus/web/react/patterns.json

@@ -0,0 +1,946 @@
+{
+  "stack": "web/react",
+  "schema_version": "1.0.0",
+  "catalog_revision": "0.5.2",
+  "cache_ttl_seconds": 3600,
+  "patterns": [
+    {
+      "id": "accordion.basic",
+      "title": "Accordion",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.1",
+      "summary": "A set of show/hide sections with heading-wrapped buttons controlling associated panels via aria-expanded (and optionally aria-controls / region).",
+      "aliases": [
+        "accordion",
+        "disclosure group",
+        "expand collapse",
+        "collapsible panels"
+      ],
+      "tags": [
+        "accordion",
+        "disclosure",
+        "show-hide"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when content can be organized into collapsible sections to reduce scanning and scrolling."
+        ],
+        "do_not_use_when": [
+          "Do not use when content must be visible for comparison or comprehension (use static, non-collapsing sections instead)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/accordion.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "button.basic",
+      "title": "Basic Button",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.1",
+      "summary": "Native button that triggers an action. Supports text-only, icon+text, and icon-only labeling patterns.",
+      "aliases": [
+        "btn",
+        "primary button",
+        "icon button",
+        "call to action",
+        "cta"
+      ],
+      "tags": [
+        "button",
+        "control",
+        "action",
+        "icon-button"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when the user triggers an immediate action (e.g., \"Save\", \"Continue\", \"Dismiss\")."
+        ],
+        "do_not_use_when": [
+          "Do not use when the control navigates to a new URL (use link).",
+          "Do not use when the control represents an on/off pressed state (use button.toggle).",
+          "Do not use when the control opens a menu (use menu.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/button.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "button.toggle",
+      "title": "Toggle Button",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.1",
+      "summary": "Two- or three-state button that toggles between pressed and not pressed using aria-pressed.",
+      "aliases": [
+        "toggle button",
+        "pressed button"
+      ],
+      "tags": [
+        "button",
+        "toggle",
+        "pressed",
+        "aria-pressed",
+        "mute-button"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a control toggles a feature or action within the current context (e.g., \"Mute\", \"Bold\", \"Pin\", \"Enable Closed Captioning\")."
+        ],
+        "do_not_use_when": [
+          "Do not use when the control navigates to a new URL (use link).",
+          "Do not use when the control represents a persistent on/off system or application setting, such as \"Enable notifications\", \"Dark mode\" (use switch.basic).",
+          "Do not use when the control records a value to submit with a form rather than toggling something in the current context (use checkbox.basic).",
+          "Do not use when the control opens a menu (use menu.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/button.toggle.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "carousel.dots",
+      "title": "Carousel with Dot Navigation",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "Horizontally-advancing carousel (aka hero or marquee carousel) with 'dot' navigation, prev/next buttons, and pause behavior.",
+      "aliases": [
+        "hero carousel",
+        "marquee",
+        "featured gallery",
+        "hero gallery",
+        "image gallery",
+        "slider"
+      ],
+      "tags": [
+        "marquee",
+        "carousel",
+        "slider",
+        "gallery",
+        "dots",
+        "autoplay",
+        "reduced-motion"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when slides are navigated sequentially using next/previous controls or dot indicators.",
+          "Use when dot buttons indicate slide position but do not display image previews."
+        ],
+        "do_not_use_when": [
+          "Do not use when thumbnail images are shown for direct slide selection (use carousel.thumbnails).",
+          "Do not use when multiple slides are visible at once in a horizontal list (use content-shelf)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/carousel.dots.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "carousel.thumbnails",
+      "title": "Carousel with Thumbnail Navigation",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "Horizontally-advancing carousel (aka hero or marquee carousel) with thumbnail navigation, prev/next buttons, and pause behavior.",
+      "aliases": [
+        "hero carousel thumbnails",
+        "marquee thumbnails",
+        "featured gallery thumbnails",
+        "hero gallery thumbnails",
+        "preview carousel"
+      ],
+      "tags": [
+        "marquee",
+        "carousel",
+        "slider",
+        "gallery",
+        "thumbnails",
+        "autoplay",
+        "reduced-motion",
+        "image-preview"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when thumbnail images are displayed for direct slide selection.",
+          "Use when users can identify slide content from visible preview images before activating a slide.",
+          "Use when thumbnails act as explicit navigation controls for specific slides."
+        ],
+        "do_not_use_when": [
+          "Do not use when navigation is limited to dot indicators without image previews (use carousel.dots).",
+          "Do not use when multiple full-size items are visible simultaneously in a scrollable row (use content-shelf)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/carousel.thumbnails.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "collection-row.basic",
+      "title": "Collection Row",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "Horizontal product shelf with a heading, list semantics, and Prev/Next paging that moves focus to newly revealed items.",
+      "aliases": [
+        "content row",
+        "content rail",
+        "rail",
+        "strip",
+        "shelf",
+        "multi item carousel",
+        "product row",
+        "product card grid",
+        "product cards",
+        "card row",
+        "media row"
+      ],
+      "tags": [
+        "collection-row",
+        "shelf",
+        "rail",
+        "horizontal-list",
+        "ecommerce",
+        "navigation"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when displaying multiple related items in a horizontally scrollable row under a shared category heading (e.g., \"Customers Also Viewed\", \"Action Movies\").",
+          "Use when multiple items are visible simultaneously and can be scrolled left or right.",
+          "Use when each item is a compact card with a primary visual element and brief supporting text."
+        ],
+        "do_not_use_when": [
+          "Do not use when only one item is visible at a time within a rotatable sequence (use carousel).",
+          "Do not use when items are arranged in a multi-row or multi-column layout (use grid).",
+          "Do not use when items are presented as a simple vertical list without horizontal scrolling (use list)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/collection-row.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "combobox.autocomplete",
+      "title": "Autocomplete Combobox",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "An editable text input that filters a listbox of options as the user types; uses role=\"combobox\" with aria-autocomplete, aria-expanded, aria-controls, and aria-activedescendant while DOM focus stays on the input.",
+      "aliases": [
+        "typeahead",
+        "type-ahead",
+        "autosuggest",
+        "auto-suggest",
+        "search select",
+        "filterable dropdown",
+        "predictive input",
+        "combo box"
+      ],
+      "tags": [
+        "combobox",
+        "autocomplete",
+        "listbox",
+        "filter",
+        "aria-activedescendant",
+        "form",
+        "search"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when the option set is large enough that typing to filter or search is faster than scanning a list (e.g., \"Country\", \"City\", \"Assign to a user\").",
+          "Use when the user narrows the available options by typing (e.g., \"Search shows\", \"Add a tag\").",
+          "Use when free-text entry is allowed alongside suggestions (e.g., a tag field that accepts new values while suggesting existing ones)."
+        ],
+        "do_not_use_when": [
+          "Do not use when no typing is needed and the set is small or preset (use select.native, or for a rich custom-styled picker use select.basic).",
+          "Do not use when the options must be permanently visible with no popup (use listbox.basic).",
+          "Do not use when the control performs actions rather than picking a value (use menu.basic).",
+          "Do not use when the trigger reveals navigation links (use navigation-menu.dropdown)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/combobox.autocomplete.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "dialog.modal",
+      "title": "Dialog (Modal)",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.3.1",
+      "summary": "User-initiated blocking dialog. Uses the native <dialog> element with .showModal() so the browser handles focus trap, background inertness, Escape dismissal, focus restoration, and top-layer rendering.",
+      "aliases": [
+        "dialog",
+        "modal",
+        "pop-up"
+      ],
+      "tags": [
+        "dialog",
+        "modal",
+        "pop-up",
+        "overlay",
+        "focus-trap",
+        "blocking",
+        "native-dialog",
+        "show-modal"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when content appears in an overlay that blocks interaction with the underlying page.",
+          "Use when keyboard focus must move into the dialog and remain contained until dismissal.",
+          "Use when the user must explicitly complete or dismiss the dialog before returning to the main interface."
+        ],
+        "do_not_use_when": [
+          "Do not use when the content is part of the normal page flow and does not block background interaction.",
+          "Do not use when presenting brief, non-blocking status messages that do not require focus movement (use toast or snackbar).",
+          "Do not use when the message is urgent and requires immediate acknowledgment (use dialog.alert).",
+          "Do not use when the interaction involves complex, multi-step workflows spanning multiple screens."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/dialog.modal.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "dialog.nonmodal",
+      "title": "Dialog (Non-Modal)",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A dialog that does not block the page; uses role=\"dialog\" with an accessible name, moves focus in on open and restores it on close, but does not trap focus or inert the background.",
+      "aliases": [
+        "non-modal dialog",
+        "modeless dialog",
+        "non-blocking dialog",
+        "popover dialog",
+        "editor popover",
+        "composer panel",
+        "floating panel"
+      ],
+      "tags": [
+        "dialog",
+        "non-modal",
+        "overlay",
+        "popover",
+        "focus-restoration",
+        "modeless"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when an overlay presents content or a task without blocking the page (e.g., a non-blocking editor popover, a composer, a rich panel with interactive controls).",
+          "Use when the user can keep interacting with the rest of the page while the overlay is open.",
+          "Use when focus should move into the dialog on open but not be trapped there."
+        ],
+        "do_not_use_when": [
+          "Do not use when the user must complete or dismiss the overlay before returning to the page (use dialog.modal).",
+          "Do not use when a control simply shows and hides inline content (use disclosure.basic).",
+          "Do not use when the overlay is a menu of commands (use menu.basic).",
+          "Do not use when the message is a brief, non-interactive status update (use toast.basic).",
+          "Do not use when the content is a plain-text supplementary hint (use tooltip.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/dialog.nonmodal.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "disclosure.basic",
+      "title": "Disclosure",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A button that shows and hides an associated content region; uses aria-expanded on the trigger and aria-controls to the region, with DOM show/hide.",
+      "aliases": [
+        "disclosure",
+        "show more",
+        "expand collapse",
+        "expandable section",
+        "collapsible panel",
+        "reveal panel",
+        "toggle content",
+        "twisty"
+      ],
+      "tags": [
+        "disclosure",
+        "show-hide",
+        "expand-collapse",
+        "button",
+        "toggle"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a control shows and hides a single section of related content (e.g., \"Show more details\", an FAQ answer, an advanced-options or filters panel).",
+          "Use when the revealed content is arbitrary (text, form fields, media).",
+          "Use when a single independent expandable region is toggled by one trigger."
+        ],
+        "do_not_use_when": [
+          "Do not use when several coordinated expandable sections form an accordion (use accordion.basic).",
+          "Do not use when the revealed items are in-place commands or actions (use menu.basic).",
+          "Do not use when a single trigger reveals a list of navigation links (use navigation-menu.dropdown).",
+          "Do not use when the control chooses a form value (use select.native)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/disclosure.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "grid.channel-guide",
+      "title": "Channel Guide Grid",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "Interactive channel guide grid with one Tab stop and arrow-key navigation across channels and time slots.",
+      "aliases": [
+        "epg",
+        "electronic program guide",
+        "tv guide",
+        "live guide",
+        "schedule grid"
+      ],
+      "tags": [
+        "grid",
+        "channel-guide",
+        "epg",
+        "schedule",
+        "roving-tabindex",
+        "keyboard"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when content is arranged in a 2D matrix of channels (rows) and time slots (columns).",
+          "Use when program items span time horizontally and are positioned according to schedule duration.",
+          "Use when users navigate spatially across a time-based schedule using arrow keys."
+        ],
+        "do_not_use_when": [
+          "Do not use when presenting static tabular data with row/column headers (use grid.data).",
+          "Do not use when items are displayed as a simple vertical or horizontal list without time-based positioning (use list).",
+          "Do not use when supporting spreadsheet-style editing, multi-cell selection, sorting, or resizing (use grid.interactive)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/grid.channel-guide.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "link.basic",
+      "title": "Link",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "Native link for navigation using <a href>. Supports optional context in the accessible name, including \"opens in new tab/window/dialog\".",
+      "aliases": [
+        "anchor",
+        "hyperlink",
+        "external link"
+      ],
+      "tags": [
+        "link",
+        "anchor",
+        "navigation",
+        "external-link"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when activating the element navigates to a different URL, route, or in-page anchor.",
+          "Use when the primary purpose of the element is destination-based navigation rather than performing an action."
+        ],
+        "do_not_use_when": [
+          "Do not use when activating the element performs an in-place action such as submitting, saving, deleting, toggling, or opening a dialog (use button).",
+          "Do not use when the element changes UI state without navigation (use button)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/link.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "listbox.basic",
+      "title": "Listbox",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "An always-visible list of selectable options using role=\"listbox\" and role=\"option\", supporting single or multiple selection with roving tabindex or aria-activedescendant.",
+      "aliases": [
+        "option list",
+        "select list",
+        "single-select list",
+        "multi-select list",
+        "transfer list source",
+        "inline listbox",
+        "choice list",
+        "selectable list"
+      ],
+      "tags": [
+        "listbox",
+        "roving-tabindex",
+        "aria-activedescendant",
+        "multi-select",
+        "selection",
+        "form"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when the choices are permanently visible with no popup or expansion (e.g., an inline \"Playback quality\" list, a settings choice shown in place).",
+          "Use when the user selects one option or multiple options from plain-text labels (e.g., \"Select genres to follow\", the source column of a transfer list)."
+        ],
+        "do_not_use_when": [
+          "Do not use when a collapsed popup value picker is expected (use select.native, or select.basic for a custom-styled one).",
+          "Do not use when the user types to filter the options (use combobox.autocomplete).",
+          "Do not use when the options must contain interactive elements such as links or buttons (use grid.basic).",
+          "Do not use when the user chooses among many independent on and off settings (use checkbox.group).",
+          "Do not use when the control performs actions rather than holding a selection (use menu.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/listbox.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "menu.basic",
+      "title": "Menu",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A button that opens a menu of commands using role='menu' and role='menuitem', with roving tabindex focus management and the full menu keyboard contract.",
+      "aliases": [
+        "kebab menu",
+        "overflow menu",
+        "actions menu",
+        "three-dot menu",
+        "more menu",
+        "menu button",
+        "context menu button",
+        "command menu"
+      ],
+      "tags": [
+        "menu",
+        "actions-menu",
+        "roving-tabindex",
+        "overflow-menu",
+        "kebab-menu",
+        "commands"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a button reveals a set of in-place commands or actions (e.g., \"Rename\", \"Duplicate\", \"Delete\", \"Export\").",
+          "Use when a button exposes an overflow (\"...\") or kebab action menu on a toolbar, card, or table row.",
+          "Use when the items perform actions in place, not navigation to a URL.",
+          "Use when you will implement the full menu keyboard contract (roving tabindex, Arrow keys, Home/End, type-ahead, Esc)."
+        ],
+        "do_not_use_when": [
+          "Do not use when the items are links or navigate to a URL (use navigation-menu.dropdown, or for a primary navigation bar use navigation-menu.basic).",
+          "Do not use when the user picks a value to submit in a form (use select.native, or for type-to-filter selection use combobox.autocomplete).",
+          "Do not use when the trigger shows and hides arbitrary content rather than a list of commands (use disclosure.basic).",
+          "Do not use when building a persistent application command bar with horizontal top-level items (use menu.menubar)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/menu.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "menu.menubar",
+      "title": "Menubar",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A persistent horizontal bar of application command menus using role=\"menubar\", role=\"menu\", and role=\"menuitem\", for desktop-application command surfaces only, never site navigation.",
+      "aliases": [
+        "menu bar",
+        "application menu bar",
+        "command bar",
+        "app menu bar",
+        "editor menu bar",
+        "file edit view menu",
+        "desktop menu bar"
+      ],
+      "tags": [
+        "menubar",
+        "menu",
+        "roving-tabindex",
+        "command-bar",
+        "application",
+        "keyboard-navigation"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when building a genuine desktop-application-style command bar that replicates an operating-system menu bar of commands (e.g., a web-based document editor, IDE, or design tool with \"File\", \"Edit\", \"View\").",
+          "Use when the items are application commands, not navigation destinations (e.g., \"New File\", \"Undo\", \"Toggle Sidebar\").",
+          "Use when the surface is a persistent bar of multiple always-visible top-level menus, not a single button that opens one menu (e.g., a File/Edit/View bar fixed at the top of the editor)."
+        ],
+        "do_not_use_when": [
+          "Do not use when the bar is site or app navigation of any kind, including a nav bar styled to look like a menu bar or with fly-out submenus; this is the overwhelmingly common case (use navigation-menu.basic).",
+          "Do not use when a single button opens one action menu (use menu.basic).",
+          "Do not use when the user picks a value from a set (use select.native).",
+          "Do not use when a single trigger shows and hides a region of content (use disclosure.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/menu.menubar.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "navigation-menu.basic",
+      "title": "Navigation Menu",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.3.0",
+      "summary": "A non-modal header navigation pattern that supports top-level links and optional sub-menus. Uses disclosure-style toggles (buttons) with aria-expanded/controls and Tab-based navigation (no roving focus / no role=menu).",
+      "aliases": [
+        "nav dropdown",
+        "header dropdown",
+        "mega menu (simple)",
+        "disclosure navigation",
+        "flyout menu"
+      ],
+      "tags": [
+        "navigation",
+        "menu",
+        "disclosure",
+        "header",
+        "sitemap",
+        "flyout"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a website's top-level navigation contains at least one sub-menu of links.",
+          "Use for primary or secondary navigation regions (e.g., header nav, section nav) when the same link + sub-menu structure is needed.",
+          "Use when the navigation structure maps to a sitemap-like set of destinations."
+        ],
+        "do_not_use_when": [
+          "Do not use when you are building a desktop-application command bar with arrow-key navigation and roving tabindex (use menu.menubar).",
+          "Do not use to select a value within a form (use select.native or combobox.autocomplete when searchable).",
+          "Do not use as the mobile or responsive version of a navigation menu."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/navigation-menu.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "navigation-menu.dropdown",
+      "title": "Navigation Dropdown",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A single-trigger, non-modal dropdown that reveals a short list of navigation links and optional actions, using a native button with aria-expanded plus DOM show/hide, and never role=\"menu\".",
+      "aliases": [
+        "account dropdown",
+        "user menu",
+        "avatar menu",
+        "profile menu",
+        "nav dropdown",
+        "links dropdown",
+        "account menu",
+        "header dropdown"
+      ],
+      "tags": [
+        "navigation",
+        "dropdown",
+        "disclosure",
+        "account-menu",
+        "avatar-menu",
+        "header"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a single dedicated control reveals a compact set of navigation destinations (e.g., an avatar button or an \"Account\" button opening \"Profile\", \"Settings\", \"Billing\").",
+          "Use when the revealed content is short and stable, typically 3-10 items that are primarily links.",
+          "Use when the revealed list ends in an optional single incidental action alongside the links (e.g., \"Sign out\")."
+        ],
+        "do_not_use_when": [
+          "Do not use when the site navigation is a bar of several top-level items or sibling dropdowns (use navigation-menu.basic).",
+          "Do not use when the revealed items are primarily in-place commands or actions that need arrow-key navigation and role=\"menu\" (use menu.basic).",
+          "Do not use when the control chooses a value to submit in a form (use select.native).",
+          "Do not use when the trigger shows and hides arbitrary non-navigational content (use disclosure.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/navigation-menu.dropdown.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "select.basic",
+      "title": "Select",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.2.0",
+      "summary": "A custom-styled form select that matches native <select> behavior using a button trigger + listbox popup, and a visually hidden native <select> for form submission and browser autofill.",
+      "aliases": [
+        "form select",
+        "styled select",
+        "listbox select",
+        "dropdown select"
+      ],
+      "tags": [
+        "select",
+        "form",
+        "form-select",
+        "listbox",
+        "dropdown"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a form input must allow selecting **one option** from a predefined set.",
+          "Use when the options are short labels and the selection is discrete (not freeform text).",
+          "Use for primary or secondary forms anywhere on a site or application."
+        ],
+        "do_not_use_when": [
+          "Do not use when a native <select> styled with CSS meets the need (use select.native).",
+          "Do not use when the user needs to type to filter a large list (use combobox.autocomplete).",
+          "Do not use when multiple selections are required (use listbox.basic).",
+          "Do not use for navigation menus or account menus (use navigation-menu.basic or navigation-menu.dropdown)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/select.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "select.native",
+      "title": "Native Select",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A native select element styled with CSS, the default single-value form control; retains native keyboard, mobile, dismissal, and assistive-technology behavior.",
+      "aliases": [
+        "native select",
+        "html select",
+        "select element",
+        "dropdown",
+        "form select",
+        "single-select",
+        "option picker",
+        "select box"
+      ],
+      "tags": [
+        "select",
+        "native-select",
+        "form",
+        "form-control",
+        "dropdown",
+        "picker"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a form field selects one value from a preset list of plain-text options (e.g., \"Sort by\", \"Country\", \"Subscription plan\").",
+          "Use when native keyboard support, mobile pickers, dismissal, form submission, and assistive-technology support are wanted without re-implementation.",
+          "Use when single selection is needed and no requirement forces a custom widget (this is the default choice)."
+        ],
+        "do_not_use_when": [
+          "Do not use when the option list needs rich or interactive content the native control cannot render (use select.basic).",
+          "Do not use when the user must type to filter a large list (use combobox.autocomplete).",
+          "Do not use when multiple selection is required (use listbox.basic; a checkbox group is often better).",
+          "Do not use when the control performs actions rather than choosing a value (use menu.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/select.native.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "switch.basic",
+      "title": "Switch",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.3.0",
+      "summary": "Two-state on/off control representing a persistent setting. Uses role=\"switch\" with aria-checked, or native checkbox semantics when applicable.",
+      "aliases": [
+        "toggle switch",
+        "preference toggle"
+      ],
+      "tags": [
+        "switch",
+        "form",
+        "settings",
+        "on-off",
+        "form-control",
+        "toggle"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a control represents a persistent binary setting that remains on or off beyond the current interaction (e.g., \"Enable notifications\", \"Dark mode\").",
+          "Use when the setting takes effect immediately when toggled, without requiring form submission.",
+          "Use when the control reflects the current state of a system or application preference."
+        ],
+        "do_not_use_when": [
+          "Do not use when the control triggers an in-place action or transient feature toggle within the current context (use button.toggle).",
+          "Do not use when the choice is a value submitted with a form rather than a setting that takes effect immediately (use checkbox.basic).",
+          "Do not use when selecting one or more options from a set of related choices (use checkbox.group).",
+          "Do not use when more than two states are required (use button.toggle)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/switch.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "toast.basic",
+      "title": "Toast",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "Temporary, non-blocking status message announced via live region. May include optional dismiss control. Disappears automatically.",
+      "aliases": [
+        "notification",
+        "toast",
+        "transient message",
+        "status message"
+      ],
+      "tags": [
+        "toast",
+        "notification",
+        "status",
+        "live-region"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when presenting a temporary, non-blocking status message.",
+          "Use when the message confirms an action (e.g., \"Saved\", \"Added to watchlist\").",
+          "Use when the message is text-only and contains no required actions, except for (at most) a dismiss button."
+        ],
+        "do_not_use_when": [
+          "Do not use when the message requires user acknowledgment, moves keyboard focus, or blocks background interaction (use dialog).",
+          "Do not use when the message is urgent or must interrupt the user immediately (use dialog.alert).",
+          "Do not use when the message includes required actions or interactive controls beyond simple dismissal (use snackbar)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/toast.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    },
+    {
+      "id": "tooltip.basic",
+      "title": "Tooltip",
+      "pattern_type": "component",
+      "status": "beta",
+      "latest_version": "0.1.0",
+      "summary": "A brief supplementary text label shown on hover and focus of its trigger; uses role=\"tooltip\" referenced by aria-describedby, and is hoverable, dismissible, and persistent.",
+      "aliases": [
+        "tooltip",
+        "hint",
+        "help bubble",
+        "info bubble",
+        "hover text",
+        "popup label",
+        "title text",
+        "describedby"
+      ],
+      "tags": [
+        "tooltip",
+        "aria-describedby",
+        "hover",
+        "focus",
+        "supplementary-label"
+      ],
+      "selection_excerpt": {
+        "use_when": [
+          "Use when a brief plain-text label supplements a control (e.g., clarifying an icon-only button, a short hint on a form field).",
+          "Use when the content is non-essential supplementary text.",
+          "Use when the label should appear on both pointer hover and keyboard focus of the trigger."
+        ],
+        "do_not_use_when": [
+          "Do not use when the content is interactive or rich, containing links or buttons (use dialog.nonmodal).",
+          "Do not use when the content is a status or confirmation message (use toast.basic).",
+          "Do not use when the label would be the control's only accessible name; give the control a real accessible name via a visible label or aria-label instead (use button.basic).",
+          "Do not use when the content is a menu of choices (use menu.basic)."
+        ]
+      },
+      "variants": [],
+      "default_variant": null,
+      "source": {
+        "path": "components/tooltip.basic.md",
+        "format": "markdown",
+        "frontmatter": true
+      }
+    }
+  ]
+}