[
  {
    "fully_qualified_name": "Primer::Alpha::ActionBar",
    "description": "Add a general description of component here\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ActionBar",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "ActionBar",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/default/",
    "parameters": [
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "overflow_menu",
        "type": "Boolean",
        "default": "`true`",
        "description": "Whether to render the overflow menu."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "items",
        "description": null,
        "parameters": []
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/action_bar/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_bar/inline",
        "name": "inline",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_bar/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_bar/small",
        "name": "small",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_bar/medium",
        "name": "medium",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_bar/large",
        "name": "large",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::ActionBar::Item",
        "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionBar::Item",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionBarItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/item/default/",
        "parameters": [
          {
            "name": "item_content",
            "type": "String",
            "default": "N/A",
            "description": "The content to render inside the item."
          },
          {
            "name": "item_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionBar::Divider",
        "description": "ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionBar::Divider",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionBarDivider",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_bar/divider.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_bar/divider/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::ActionList",
    "description": "An ActionList is a styled list of links. It acts as the base component for many\nother menu-type components, including `ActionMenu` and `SelectPanel`, as well as\nthe navigational component `NavList`.\n\nEach item in an action list can be augmented by specifying corresponding leading\nand/or trailing visuals.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "ActionList",
    "status": "alpha",
    "a11y_reviewed": true,
    "short_name": "ActionList",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/",
    "parameters": [
      {
        "name": "id",
        "type": "String",
        "default": "`self.class.generate_id`",
        "description": "HTML ID value."
      },
      {
        "name": "role",
        "type": "Boolean",
        "default": "`nil`",
        "description": "ARIA role describing the function of the list. listbox and menu are a common values."
      },
      {
        "name": "item_classes",
        "type": "String",
        "default": "`nil`",
        "description": "Additional CSS classes to attach to items."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:full`",
        "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
      },
      {
        "name": "show_dividers",
        "type": "Boolean",
        "default": "`false`",
        "description": "Display a divider above each item in the list when it does not follow a header or divider."
      },
      {
        "name": "select_variant",
        "type": "Symbol",
        "default": "`:none`",
        "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
      },
      {
        "name": "aria_selection_variant",
        "type": "Symbol",
        "default": "`:checked`",
        "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
      },
      {
        "name": "form_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} instead of using this feature directly."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "Heading text rendered above the list of items.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "N/A",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by `component_klass`."
          }
        ]
      },
      {
        "name": "items",
        "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "with_item",
        "description": "Adds an item to the list.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "N/A",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_divider",
        "description": "Adds a divider to the list. Dividers visually separate items.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_avatar_item",
        "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The source url of the avatar image."
          },
          {
            "name": "username",
            "type": "String",
            "default": "N/A",
            "description": "The username associated with the avatar."
          },
          {
            "name": "full_name",
            "type": "String",
            "default": "`nil`",
            "description": "Optional. The user's full name."
          },
          {
            "name": "full_name_scheme",
            "type": "Symbol",
            "default": "`:block`",
            "description": "Optional. How to display the user's full name. One of `:block` or `:inline`."
          },
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`ActionList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}"
          },
          {
            "name": "avatar_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "id",
        "description": "Returns the value of attribute id.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "select_variant",
        "description": "Returns the value of attribute select_variant.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "role",
        "description": "Returns the value of attribute role.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "aria_selection_variant",
        "description": "Returns the value of attribute aria_selection_variant.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "build_item",
        "description": "Builds a new item but does not add it to the list. Use this method\ninstead of the `#with_item` slot if you need to render an item outside\nthe context of a list, eg. if rendering additional items to append to\nan existing list, perhaps via a separate HTTP request.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`ActionList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "build_avatar_item",
        "description": "Builds a new avatar item but does not add it to the list. Avatar items\nare a convenient way to accessibly add an item with a leading avatar\nimage. Use this method instead of the `#with_avatar_item` slot if you\nneed to render an avatar item outside the context of a list, eg. if\nrendering additional items to append to an existing list, perhaps via\na separate HTTP request.",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The source url of the avatar image."
          },
          {
            "name": "username",
            "type": "String",
            "default": "N/A",
            "description": "The username associated with the avatar."
          },
          {
            "name": "full_name",
            "type": "String",
            "default": "`nil`",
            "description": "Optional. The user's full name."
          },
          {
            "name": "full_name_scheme",
            "type": "Symbol",
            "default": "`:block`",
            "description": "Optional. How to display the user's full name. One of `:block` or `:inline`."
          },
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`ActionList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}"
          },
          {
            "name": "avatar_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "post_list_content_block",
        "description": "Returns the value of attribute post_list_content_block.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/action_list/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/leading_visuals",
        "name": "leading_visuals",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/with_manual_dividers",
        "name": "with_manual_dividers",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/divider",
        "name": "divider",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/heading",
        "name": "heading",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item",
        "name": "item",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/avatar_item",
        "name": "avatar_item",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_default",
        "name": "item_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_size_large",
        "name": "item_size_large",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_size_xlarge",
        "name": "item_size_xlarge",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_leading_visual",
        "name": "item_leading_visual",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_trailing_visual",
        "name": "item_trailing_visual",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_leading_trailing_visual",
        "name": "item_leading_trailing_visual",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_with_description",
        "name": "item_with_description",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_with_description_inline",
        "name": "item_with_description_inline",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_trailing_action",
        "name": "item_trailing_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_danger",
        "name": "item_danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_disabled",
        "name": "item_disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_wrap_label",
        "name": "item_wrap_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_truncate_label",
        "name": "item_truncate_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/item_active",
        "name": "item_active",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/long_label_with_tooltip",
        "name": "long_label_with_tooltip",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/long_label_wrap",
        "name": "long_label_wrap",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/long_label_truncate_no_tooltip",
        "name": "long_label_truncate_no_tooltip",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/long_label_show_tooltip_with_truncate_label",
        "name": "long_label_show_tooltip_with_truncate_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_list/listbox",
        "name": "listbox",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::ActionList::Item",
        "description": "An individual `ActionList` item. Items can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionList::Item",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionListItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/",
        "parameters": [
          {
            "name": "list",
            "type": "Primer::Alpha::ActionList",
            "default": "N/A",
            "description": "The list that contains this item. Used internally."
          },
          {
            "name": "parent",
            "type": "Primer::Alpha::ActionList::Item",
            "default": "`nil`",
            "description": "This item's parent item. `nil` if this item is at the root. Used internally."
          },
          {
            "name": "label",
            "type": "String",
            "default": "`nil`",
            "description": "Item label. If no label is provided, content is used."
          },
          {
            "name": "item_id",
            "type": "String",
            "default": "`nil`",
            "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
          },
          {
            "name": "label_classes",
            "type": "String",
            "default": "`nil`",
            "description": "CSS classes that will be added to the label."
          },
          {
            "name": "label_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "{{link_to_system_arguments_docs}} used to construct the label."
          },
          {
            "name": "content_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "{{link_to_system_arguments_docs}} used to construct the item's anchor or button tag."
          },
          {
            "name": "form_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Allows the item to submit a form on click. The URL passed in the `href:` option will be used as the form action. Pass the `method:` option to this hash to control what kind of request is made, One of `:delete`, `:get`, `:head`, `:patch`, `:post`, or `:put`. The `name:` option is required and specifies the desired name of the field that will be included in the params sent to the server on form submission. Specify the `value:` option to send a custom value to the server; otherwise the value of `name:` is sent."
          },
          {
            "name": "truncate_label",
            "type": "Boolean | Symbol",
            "default": "`:none`",
            "description": "How the label should be truncated when the text does not fit inside the bounds of the list item. One of `false`, `:none`, `:show_tooltip`, `:truncate`, or `true`. Pass `false` or `:none` to wrap label text. Pass `true` or `:truncate` to truncate labels with ellipses. Pass `:show_tooltip` to show the entire label contents in a tooltip when the item is hovered."
          },
          {
            "name": "href",
            "type": "String",
            "default": "`nil`",
            "description": "Link URL."
          },
          {
            "name": "role",
            "type": "String",
            "default": "`nil`",
            "description": "ARIA role describing the function of the item."
          },
          {
            "name": "size",
            "type": "Symbol",
            "default": "`:medium`",
            "description": "Controls block sizing of the item."
          },
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:default`",
            "description": "Controls color/style based on behavior."
          },
          {
            "name": "disabled",
            "type": "Boolean",
            "default": "`false`",
            "description": "Disabled items are not clickable and visually dim."
          },
          {
            "name": "description_scheme",
            "type": "Symbol",
            "default": "`:block`",
            "description": "Display description inline with label, or block on the next line. One of `:block` or `:inline`."
          },
          {
            "name": "active",
            "type": "Boolean",
            "default": "`false`",
            "description": "If the parent list's `select_variant` is set to `:single` or `:multiple`, causes this item to render checked."
          },
          {
            "name": "on_click",
            "type": "String",
            "default": "`nil`",
            "description": "JavaScript to execute when the item is clicked."
          },
          {
            "name": "id",
            "type": "String",
            "default": "`self.class.generate_id`",
            "description": "Used internally."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "description",
            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
            "parameters": [
              {
                "name": "legacy_content",
                "type": "String",
                "default": "N/A",
                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
              },
              {
                "name": "test_selector",
                "type": "String",
                "default": "N/A",
                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
              }
            ]
          },
          {
            "name": "leading_visual",
            "description": "An icon, avatar, SVG, or custom content that will render to the left of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render an SVG, call the `with_leading_visual_svg` method.\n\nTo render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.",
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": "An icon, label, counter, or text to render to the right of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}.\n\nTo render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.\n\nTo render text, call the `with_leading_visual_text` method and pass a block that returns a string. Eg:\n```ruby\nwith_leading_visual_text { \"Text here\" }\n```",
            "parameters": []
          },
          {
            "name": "trailing_action",
            "description": "A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "tooltip",
            "description": "`Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as\na last resort. **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be\nmore appropriate. Consult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
            "parameters": [
              {
                "name": "type",
                "type": "Symbol",
                "default": "`:description`",
                "description": "One of `:description` or `:label`."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "id",
            "description": "Returns the value of attribute id.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "item_id",
            "description": "Returns the value of attribute item_id.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "list",
            "description": "Returns the value of attribute list.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "href",
            "description": "Returns the value of attribute href.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "active",
            "description": "Returns the value of attribute active.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "disabled",
            "description": "Returns the value of attribute disabled.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "parent",
            "description": "Returns the value of attribute parent.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "active?",
            "description": "Returns the value of attribute active.\nWhether or not this item is active.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "disabled?",
            "description": "Returns the value of attribute disabled.\nWhether or not this item is disabled.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionList::Heading",
        "description": "Heading used to describe each sub list within an action list.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionList::Heading",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionListHeading",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/",
        "parameters": [
          {
            "name": "title",
            "type": "String",
            "default": "N/A",
            "description": "Sub list title."
          },
          {
            "name": "heading_level",
            "type": "Integer",
            "default": "`3`",
            "description": "Heading level. Level 2 results in an `<h2>` tag, level 3 an `<h3>` tag, etc."
          },
          {
            "name": "subtitle",
            "type": "String",
            "default": "`nil`",
            "description": "Optional sub list description."
          },
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:subtle`",
            "description": "Display a background color if scheme is `filled`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [
          {
            "name": "title_id",
            "description": "Returns the value of attribute title_id.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "subtitle_id",
            "description": "Returns the value of attribute subtitle_id.",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionList::FormWrapper",
        "description": "Utility component for wrapping ActionLists or individual ActionList::Items in forms.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionList::FormWrapper",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionListFormWrapper",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/form_wrapper.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/form_wrapper/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionList::Divider",
        "description": "Separator with optional text rendered above groups or between individual items.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionList::Divider",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionListDivider",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/",
        "parameters": [
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:subtle`",
            "description": "Display a background color if scheme is `filled`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::ActionMenu",
    "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"<string>\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the\n`form_arguments:` argument, including the Rails form builder object and the name of the field:\n\n```erb\n<% form_with(url: update_merge_strategy_path) do |f| %>\n  <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: \"merge_strategy\" })) do |menu| %>\n    <% menu.with_item(label: \"Fast forward\", data: { value: \"fast_forward\" }) %>\n    <% menu.with_item(label: \"Recursive\", data: { value: \"recursive\" }) %>\n    <% menu.with_item(label: \"Ours\", data: { value: \"ours\" }) %>\n    <% menu.with_item(label: \"Theirs\", data: { value: \"theirs\" }) %>\n  <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"merge_strategy\"`). If no value is provided for an item, the value of that item is the item's label.  Here's the\ncorresponding `MergeStrategyController` that might be written to handle the form above:\n\n```ruby\nclass MergeStrategyController < ApplicationController\n  def update\n    puts \"You chose #{merge_strategy_params[:merge_strategy]}\"\n  end\n\n  private\n\n  def merge_strategy_params\n    params.permit(:merge_strategy)\n  end\nend\n```\n\n### `ActionMenu` items that submit forms\n\nWhereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items\nalso permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass\nthe `form_arguments:` argument to the appropriate item:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n  <% menu.with_item(\n    label: \"Repository\",\n    href: update_repo_grouping_path,\n    form_arguments: {\n      method: :post,\n      name: \"group_by\",\n      value: \"repository\"\n    }\n  ) %>\n<% end %>\n```\n\nMake sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to\nthe URL passed in the `href:` argument, including a parameter named `\"group_by\"` with a value of `\"repository\"`. If no value\nis given, the name, eg. `\"group_by\"`, will be used as the value.\n\nIt is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via\nthe `inputs:` argument:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n  <% menu.with_show_button { \"Group By\" } %>\n  <% menu.with_item(\n    label: \"Repository\",\n    href: update_repo_grouping_path,\n    form_arguments: {\n      method: :post,\n      inputs: [{\n        name: \"group_by\",\n        value: \"repository\"\n      }, {\n        name: \"some_other_field\",\n        value: \"some value\",\n      }],\n    }\n  ) %>\n<% end %>\n```\n\n### Form arguments\n\nThe following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.\n\n|Name             |Type          |Default|Description|\n|:----------------|:-------------|:------|:----------|\n|`method`         |`Symbol`      |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|\n|`name`           |`String`      |`nil`  |The name of the field that will be sent to the server on submit.|\n|`value`          |`String`      |`nil`  |The value of the field that will be sent to the server on submit.|\n|`input_arguments`|`Hash`        |`{}`   |Additional key/value pairs to emit as HTML attributes on the `<input type=\"hidden\">` element.|\n|`inputs`         |`Array<Hash>` |`[]`   |An array of hashes representing HTML `<input type=\"hidden\">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `<input type=\"hidden\">` elements.\n\n### JavaScript API\n\n`ActionMenu`s render an `<action-menu>` custom element that exposes behavior to the client.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `ActionMenu` items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the list, eg:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n  <% menu.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\nThe `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"action-menu\").addEventListener(\"itemActivated\", (event: CustomEvent<ItemActivatedEvent>) => {\n  event.detail.item     // Element: the <li> item that was activated\n  event.detail.checked  // boolean: whether or not the result of the activation checked the item\n})\n```",
    "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything\nnested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "ActionMenu",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "ActionMenu",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/default/",
    "parameters": [
      {
        "name": "menu_id",
        "type": "String",
        "default": "`self.class.generate_id`",
        "description": "Id of the menu."
      },
      {
        "name": "anchor_align",
        "type": "Symbol",
        "default": "`:start`",
        "description": "One of `:center`, `:end`, or `:start`.."
      },
      {
        "name": "anchor_side",
        "type": "Symbol",
        "default": "`:outside_bottom`",
        "description": "One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`.."
      },
      {
        "name": "anchor_when_narrow",
        "type": "Symbol",
        "default": "`:inherit`",
        "description": "One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`.."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:auto`",
        "description": "One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.."
      },
      {
        "name": "src",
        "type": "String",
        "default": "`nil`",
        "description": "Used with an `include-fragment` element to load menu content from the given source URL."
      },
      {
        "name": "preload",
        "type": "Boolean",
        "default": "`false`",
        "description": "When true, and src is present, loads the `include-fragment` on trigger hover."
      },
      {
        "name": "dynamic_label",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to display the text of the currently selected item in the show button."
      },
      {
        "name": "dynamic_label_prefix",
        "type": "String",
        "default": "`nil`",
        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
      },
      {
        "name": "select_variant",
        "type": "Symbol",
        "default": "`:none`",
        "description": "One of `:multiple`, `:none`, or `:single`."
      },
      {
        "name": "form_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
      },
      {
        "name": "overlay_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}"
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}."
      }
    ],
    "slots": [
      {
        "name": "show_button",
        "description": "Button to activate the menu.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
          }
        ]
      },
      {
        "name": "items",
        "description": "Adds a new item to the list.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "list",
        "description": "Returns the value of attribute list.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "preload",
        "description": "Returns the value of attribute preload.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "preload?",
        "description": "Returns the value of attribute preload.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "with_show_button",
        "description": "Button to activate the menu.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_item",
        "description": "Adds a new item to the list.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_divider",
        "description": "Adds a divider to the list.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `divider` slot."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_avatar_item",
        "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The source url of the avatar image."
          },
          {
            "name": "username",
            "type": "String",
            "default": "N/A",
            "description": "The username associated with the avatar."
          },
          {
            "name": "full_name",
            "type": "String",
            "default": "N/A",
            "description": "Optional. The user's full name."
          },
          {
            "name": "full_name_scheme",
            "type": "Symbol",
            "default": "N/A",
            "description": "Optional. How to display the user's full name."
          },
          {
            "name": "avatar_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/action_menu/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/content_labels",
        "name": "content_labels",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_groups",
        "name": "with_groups",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_items_and_groups",
        "name": "with_items_and_groups",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/wide",
        "name": "wide",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_icon_button",
        "name": "with_icon_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/single_select",
        "name": "single_select",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/multiple_select",
        "name": "multiple_select",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/links",
        "name": "links",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/single_selected_item",
        "name": "single_selected_item",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/single_select_with_internal_label",
        "name": "single_select_with_internal_label",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/multiple_selected_items",
        "name": "multiple_selected_items",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_deferred_content",
        "name": "with_deferred_content",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_deferred_preloaded_content",
        "name": "with_deferred_preloaded_content",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_actions",
        "name": "with_actions",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/single_select_form",
        "name": "single_select_form",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/single_select_form_items",
        "name": "single_select_form_items",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/multiple_select_form",
        "name": "multiple_select_form",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/with_disabled_items",
        "name": "with_disabled_items",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/opens_dialog",
        "name": "opens_dialog",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/in_scroll_container",
        "name": "in_scroll_container",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/align_end",
        "name": "align_end",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/block_description",
        "name": "block_description",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/submitting_forms",
        "name": "submitting_forms",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/inline_description",
        "name": "inline_description",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/leading_visual",
        "name": "leading_visual",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/leading_visual_single_select",
        "name": "leading_visual_single_select",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/two_menus",
        "name": "two_menus",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/action_menu/fullscreen_when_narrow",
        "name": "fullscreen_when_narrow",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::ActionMenu::List",
        "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionMenu::List",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionMenuList",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
          }
        ],
        "slots": [],
        "methods": [
          {
            "name": "items",
            "description": "Returns the value of attribute items.",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionMenu::Heading",
        "description": "Heading used to describe groups within an action menu.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionMenu::Heading",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ActionMenuHeading",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionMenu::ListWrapper",
        "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionMenu::ListWrapper",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "ActionMenuListWrapper",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
        "parameters": [
          {
            "name": "menu_id",
            "type": "String",
            "default": "N/A",
            "description": "ID of the parent menu."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
          }
        ],
        "slots": [
          {
            "name": "heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by `component_klass`."
              }
            ]
          },
          {
            "name": "items",
            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
            "parameters": []
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::ActionMenu::Group",
        "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ActionMenu::Group",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "ActionMenuGroup",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
        "parameters": [
          {
            "name": "id",
            "type": "String",
            "default": "`self.class.generate_id`",
            "description": "HTML ID value."
          },
          {
            "name": "role",
            "type": "Boolean",
            "default": "`nil`",
            "description": "ARIA role describing the function of the list. listbox and menu are a common values."
          },
          {
            "name": "item_classes",
            "type": "String",
            "default": "`nil`",
            "description": "Additional CSS classes to attach to items."
          },
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:full`",
            "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
          },
          {
            "name": "show_dividers",
            "type": "Boolean",
            "default": "`false`",
            "description": "Display a divider above each item in the list when it does not follow a header or divider."
          },
          {
            "name": "select_variant",
            "type": "Symbol",
            "default": "`:none`",
            "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
          },
          {
            "name": "aria_selection_variant",
            "type": "Symbol",
            "default": "`:checked`",
            "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
          },
          {
            "name": "form_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} instead of using this feature directly."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by `component_klass`."
              }
            ]
          },
          {
            "name": "items",
            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
            "parameters": []
          }
        ],
        "methods": [
          {
            "name": "with_heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::AutoComplete",
    "description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must use a non-visible label, set `is_label_visible` to `false`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "AutoComplete",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "AutoComplete",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/default/",
    "parameters": [
      {
        "name": "label_text",
        "type": "String",
        "default": "N/A",
        "description": "The label of the input."
      },
      {
        "name": "src",
        "type": "String",
        "default": "N/A",
        "description": "The route to query."
      },
      {
        "name": "input_id",
        "type": "String",
        "default": "N/A",
        "description": "Id of the input element."
      },
      {
        "name": "input_name",
        "type": "String",
        "default": "`nil`",
        "description": "Optional name of the input element, defaults to `input_id` when not set."
      },
      {
        "name": "list_id",
        "type": "String",
        "default": "N/A",
        "description": "Id of the list element."
      },
      {
        "name": "with_icon",
        "type": "Boolean",
        "default": "`false`",
        "description": "Controls if a search icon is visible, defaults to `false`."
      },
      {
        "name": "is_label_visible",
        "type": "Boolean",
        "default": "`true`",
        "description": "Controls if the label is visible. If `false`, screen reader only text will be added."
      },
      {
        "name": "is_clearable",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds optional clear button."
      },
      {
        "name": "is_label_inline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Controls if the label is inline. On smaller screens, label will always become stacked."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "results",
        "description": "Customizable results list.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "input",
        "description": "Customizable input used to search for results.\nIt is preferred to use this slot sparingly - it will be created by default if not explicity added.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "label_classes",
        "description": "Private: determines the label classes based on component configration.\n\nIf the label is not visible, return an empty string.",
        "parameters": [
          {
            "name": "args",
            "type": "Hash",
            "default": "N/A",
            "description": "The component configuration."
          }
        ],
        "return_types": [
          "String"
        ]
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/auto_complete/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/auto_complete/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/auto_complete/with_non_visible_label",
        "name": "with_non_visible_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/auto_complete/with_inline_label",
        "name": "with_inline_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/auto_complete/with_icon",
        "name": "with_icon",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/auto_complete/with_clear_button",
        "name": "with_clear_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::AutoComplete::Item",
        "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "AutoComplete::Item",
        "status": "deprecated",
        "a11y_reviewed": false,
        "short_name": "AutoCompleteItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/auto_complete/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/auto_complete/item/default/",
        "parameters": [
          {
            "name": "value",
            "type": "String",
            "default": "N/A",
            "description": "Value of the item."
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether the item is selected."
          },
          {
            "name": "disabled",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether the item is disabled."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::Banner",
    "description": "Use `Banner` to highlight important information.\n\n### Events\n\n|Name      |Type                |Bubbles |Cancelable |\n|:---------|:-------------------|:-------|:----------|\n|`dismiss` |`CustomEvent<void>` |No      |No         |",
    "accessibility_docs": "### Improve discoverability with a heading and landmark\nBanners are made visually prominent with icons and colors to immediately draw attention.\n\nTo ensure the Banner is also easily discoverable for assistive technology users, consider:\n1. Providing a heading inside of the Banner that describes the purpose of the Banner.\n2. Designating the Banner as a `region` landmark. This can be achieved by rendering the Banner as a `section`  with an `aria-labelledby` pointing to the heading.\n\n### Communicating feedback\nWhen a Banner is used to communicate feedback, a live region or focus management technique should be in place to ensure that assistive technology users are aware of the feedback, especially when the Banner is shown client-side. Visit the [Banner's Accessibility section](https://primer.style/components/banner#accessibility), or defer to the accessibility team.\n\n#### Approach 1: Announcing a Banner\nA live region announcement can be used to communicate non-critical feedback, such as a success message.\n\nTo successfully trigger a live region announcement for a Banner that is un-`hidden` or dynamically injected onto the page, **do not** set the live region attribute/role on the Banner itself. Instead, it's important to rely on a live region that is already guaranteed to be on the page. Learn more about specific techniques at: [Staff only: Challenges with live regions](https://github.com/github/accessibility/blob/main/docs/coaching-recommendations/toast-flash-banner/accessible-banner-prototype.md#challenges-with-dynamically-inserted-live-region).\n\n#### Approach 2: Focusing a Banner\nFocusing the Banner can be appropriate for critical feedback scenarios, such as a [form validation error summary](https://primer.style/ui-patterns/forms/overview#interactive-summary-of-errors) where the Banner contains actions to help unblock the user.\n\nTo properly focus a Banner, add a `tabindex=\"-1\"` place focus with JavaScript (using the [`focus()` API](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus)).",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Banner",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Banner",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "One of `:div` or `:section`."
      },
      {
        "name": "full",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the component should take up the full width of the screen."
      },
      {
        "name": "full_when_narrow",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
      },
      {
        "name": "dismiss_scheme",
        "type": "Symbol",
        "default": "`:none`",
        "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
      },
      {
        "name": "dismiss_label",
        "type": "String",
        "default": "`Dismiss`",
        "description": "The aria-label text of the dismiss \"x\" button"
      },
      {
        "name": "description",
        "type": "String",
        "default": "`nil`",
        "description": "Description text rendered underneath the message."
      },
      {
        "name": "icon",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The name of an {{link_to_octicons}} icon to use. If no icon is provided, a default one will be chosen based on the scheme."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger`, `:default`, `:success`, `:upsell`, or `:warning`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "action",
        "description": "A button or custom content that will render on the right-hand side of the component.\n\nTo render a button, call the `with_action_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_action_content` method and pass a block that returns HTML.",
        "parameters": []
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/banner/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/scheme_default",
        "name": "scheme_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/scheme_danger",
        "name": "scheme_danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/scheme_success",
        "name": "scheme_success",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/scheme_warning",
        "name": "scheme_warning",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/scheme_upsell",
        "name": "scheme_upsell",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/dismissible",
        "name": "dismissible",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/full_width_in_narrow_viewport",
        "name": "full_width_in_narrow_viewport",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/with_action_button",
        "name": "with_action_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/banner/with_action_content",
        "name": "with_action_content",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::ButtonMarketing",
    "description": "Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
    "accessibility_docs": "Setting the tag argument to `:a` requires you to pass in an `href` attribute.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ButtonMarketing",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "ButtonMarketing",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/button_marketing/default/",
    "parameters": [
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:default`, `:outline`, `:primary`, or `:transparent`."
      },
      {
        "name": "variant",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:default` or `:large`."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:a` or `:button`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button` or `:submit`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/button_marketing/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/link_as_button",
        "name": "link_as_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/sizes_default",
        "name": "sizes_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/sizes_large",
        "name": "sizes_large",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/scheme_default",
        "name": "scheme_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/scheme_primary",
        "name": "scheme_primary",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/scheme_outline",
        "name": "scheme_outline",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/button_marketing/scheme_transparent",
        "name": "scheme_transparent",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::CheckBox",
    "description": "Check boxes are true/false inputs rendered as `<input type=\"checkbox\">` in HTML.\n\n## Schemes\n\nCheck boxes can submit values to the server using one of two schemes, either `:array`\nor `:boolean` (the default). Check boxes with a scheme of `:boolean` function like normal\nHTML check boxes. If they are checked, a value of \"1\" is sent to the server; if they are\nunchecked, a value of \"0\" is sent to the server. The checked and unchecked values can be\ncustomized via the `:value` and `:unchecked_value` arguments respectively.\n\nWhereas `:boolean` check boxes must have unique names, `:array` check boxes all have the\nsame name. On form submission, Rails will aggregate the values of the check boxes with the\nsame name and provide them to the controller as an array. If `:scheme:` is `:array`, the\n`:value` argument must also be provided. The `:unchecked_value` argument is ignored. If a\ncheck box is checked on submit, its corresponding value will appear in the array. If it is\nnot checked, its value will not appear in the array.\n\n## Caption templates\n\nCaption templates for `:array`-type check boxes work a little differently than they do for\nother input types. Because the name must be the same for all check boxes that make up an\narray, caption template file names are comprised of both the name _and_ the value of each\ncheck box. For example, a check box with the name `foo` and value `bar` must have a caption\ntemplate named `foo_bar_caption.html.erb`.\n\n## Nested Forms\n\nCheck boxes can have \"nested\" forms that are rendered below the caption. A common use-case\nis a form that is hidden until the check box is checked. Nested forms are indented slightly\nto align with the label and caption.\n\nDefine a nested form via the `#nested_form` method, which is expected to return an instance\nof a Primer form (see the usage section below).\n\nAny fields defined in the nested form are submitted along with the parent form's fields.\n\n**NOTE**: Check boxes do not automatically show or hide nested forms. If such behavior is\ndesired, it must be done by hand.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "CheckBox",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "CheckBox",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/check_box.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/check_box/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      },
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "value",
        "type": "String",
        "default": "N/A",
        "description": "On form submission, this value will be sent to the server if the check box is checked. Defaults to \"1\"."
      },
      {
        "name": "unchecked_value",
        "type": "String",
        "default": "N/A",
        "description": "On form submission, this value will be sent to the server if the check box is _not_ checked. Defaults to \"0\"."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "N/A",
        "description": "Controls how check box values are submitted to the server. One of `:array` or `:boolean`.."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/check_box/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box/checked",
        "name": "checked",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box/disabled",
        "name": "disabled",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::CheckBoxGroup",
    "description": "Check box groups consist of one or more related check boxes.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "CheckBoxGroup",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "CheckBoxGroup",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/check_box_group.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/check_box_group/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute. When provided, the check box values will be submitted in to the server in `:array` mode. See the {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}} for more information."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the group."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the group."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      }
    ],
    "slots": [],
    "methods": [
      {
        "name": "check_box",
        "description": "Adds a check box to the group.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}}."
          },
          {
            "name": "block",
            "type": "Proc",
            "default": "N/A",
            "description": "The block accepted by {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}}."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/check_box_group/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/invalid",
        "name": "invalid",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/full_width",
        "name": "full_width",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/check_box_group/disabled",
        "name": "disabled",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Dialog",
    "description": "A `Dialog` is used to remove the user from the main application flow,\nto confirm actions, ask for disambiguation or to present small forms.",
    "accessibility_docs": "- **Dialog Accessible Name**: A dialog should have an accessible name,\nso screen readers are aware of the purpose of the dialog when it opens.\nGive an accessible name setting `:title`. The accessible name will be\nused as the main heading inside the dialog.\n- **Dialog unique id**: A dialog should be unique. Give a unique id\nsetting `:dialog_id`. If no `:dialog_id` is given, a default randomize\nhex id is generated.\n\nThe combination of both `:title` and `:dialog_id` establishes an\n`aria-labelledby` relationship between the title and the unique id of\nthe dialog.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Dialog",
    "status": "alpha",
    "a11y_reviewed": true,
    "short_name": "Dialog",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/",
    "parameters": [
      {
        "name": "id",
        "type": "String",
        "default": "`self.class.generate_id`",
        "description": "The id of the dialog."
      },
      {
        "name": "title",
        "type": "String",
        "default": "N/A",
        "description": "Describes the content of the dialog."
      },
      {
        "name": "subtitle",
        "type": "String",
        "default": "`nil`",
        "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
      },
      {
        "name": "position",
        "type": "Symbol",
        "default": "`:center`",
        "description": "The position of the dialog. One of `:center`, `:left`, or `:right`."
      },
      {
        "name": "position_narrow",
        "type": "Symbol",
        "default": "`:inherit`",
        "description": "The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
      },
      {
        "name": "visually_hide_title",
        "type": "Boolean",
        "default": "`false`",
        "description": "If true will hide the heading title, while still making it available to Screen Readers."
      },
      {
        "name": "disable_scroll",
        "type": "Boolean",
        "default": "`true`",
        "description": "When true, disables scrolling the page when the dialog is open."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "show_button",
        "description": "Optional button to open the dialog.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "header",
        "description": "Header content.",
        "parameters": [
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "N/A",
            "description": "Show a divider between the header and body."
          },
          {
            "name": "visually_hide_title",
            "type": "Boolean",
            "default": "N/A",
            "description": "Visually hide the `title` while maintaining a label for assistive technologies."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Header{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "body",
        "description": "Required body content.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "footer",
        "description": "Footer content.",
        "parameters": [
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "N/A",
            "description": "Show a divider between the footer and body."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "id",
        "description": "The dialog's ID value.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/dialog/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/long_text",
        "name": "long_text",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_header",
        "name": "with_header",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_footer",
        "name": "with_footer",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_form",
        "name": "with_form",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/custom_header",
        "name": "custom_header",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/nested_dialog",
        "name": "nested_dialog",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_text_input",
        "name": "with_text_input",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_auto_complete",
        "name": "with_auto_complete",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/body_has_scrollbar_overflow",
        "name": "body_has_scrollbar_overflow",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/autofocus_element",
        "name": "autofocus_element",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/left_side",
        "name": "left_side",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/right_side",
        "name": "right_side",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/scroll_container",
        "name": "scroll_container",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/dialog_inside_overlay",
        "name": "dialog_inside_overlay",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/initally_open",
        "name": "initally_open",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_header_filter",
        "name": "with_header_filter",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/with_header_close_button_label",
        "name": "with_header_close_button_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dialog/without_header_close_button_label",
        "name": "without_header_close_button_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::Dialog::Header",
        "description": "A `Dialog::Header` is a compositional component, used to render the\nHeader of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Dialog::Header",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "DialogHeader",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/header.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/header/default/",
        "parameters": [
          {
            "name": "id",
            "type": "String",
            "default": "N/A",
            "description": "The HTML element's ID value."
          },
          {
            "name": "title",
            "type": "String",
            "default": "N/A",
            "description": "Describes the content of the dialog."
          },
          {
            "name": "subtitle",
            "type": "String",
            "default": "`nil`",
            "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
          },
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "`false`",
            "description": "Show a divider between the header and body."
          },
          {
            "name": "visually_hide_title",
            "type": "Boolean",
            "default": "`false`",
            "description": "Visually hide the `title` while maintaining a label for assistive technologies."
          },
          {
            "name": "variant",
            "type": "Symbol",
            "default": "`:medium`",
            "description": "One of `:large` or `:medium`."
          },
          {
            "name": "close_label",
            "type": "String",
            "default": "`Close`",
            "description": "The aria-label text of the close \"x\" button."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "filter",
            "description": "Optional filter slot for adding a filter input to the header.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          },
          {
            "name": "subtitle",
            "description": "Optional subtitle slot for adding a subtitle to the header.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Dialog::Body",
        "description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Dialog::Body",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "DialogBody",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/body.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/body/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Dialog::Footer",
        "description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Dialog::Footer",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "DialogFooter",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/footer.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/footer/default/",
        "parameters": [
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "`false`",
            "description": "Show a divider between the footer and body."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::Dropdown",
    "description": "`Dropdown` is a lightweight context menu for housing navigation and actions.\nThey're great for instances where you don't need the full power (and code) of the SelectMenu.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Dropdown",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Dropdown",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
    "parameters": [
      {
        "name": "overlay",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:dark`, `:default`, or `:none`."
      },
      {
        "name": "with_caret",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not a caret should be rendered in the button."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "button",
        "description": "Required trigger for the dropdown. Has the same arguments as {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}},\nbut it is locked as a `summary` tag.",
        "parameters": [
          {
            "name": "aria_label_open",
            "type": "String",
            "default": "N/A",
            "description": "Defaults to \"Close\". Value to announce when menu is open."
          },
          {
            "name": "aria_label_closed",
            "type": "String",
            "default": "N/A",
            "description": "Defaults to \"Open\". Value to announce when menu is closed."
          }
        ]
      },
      {
        "name": "menu",
        "description": "Required context menu for the dropdown.",
        "parameters": [
          {
            "name": "as",
            "type": "Symbol",
            "default": "N/A",
            "description": "When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item."
          },
          {
            "name": "direction",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`."
          },
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "N/A",
            "description": "Pass `:dark` for dark mode theming"
          },
          {
            "name": "header",
            "type": "String",
            "default": "N/A",
            "description": "Optional string to display as the header"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/dropdown/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/menu",
        "name": "menu",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_e",
        "name": "direction_e",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_ne",
        "name": "direction_ne",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_s",
        "name": "direction_s",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_se",
        "name": "direction_se",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_sw",
        "name": "direction_sw",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/direction_w",
        "name": "direction_w",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_with_caret",
        "name": "options_with_caret",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_with_header",
        "name": "options_with_header",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_with_dividers",
        "name": "options_with_dividers",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_as_list",
        "name": "options_as_list",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_overlay_none",
        "name": "options_overlay_none",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/dropdown/options_overlay_dark",
        "name": "options_overlay_dark",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::Dropdown::Menu::Item",
        "description": "Items to be rendered in the `Dropdown` menu.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Dropdown::Menu::Item",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "DropdownMenuItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown/menu/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/menu/item/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Dropdown::Menu",
        "description": "This component is part of `Dropdown` and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Dropdown::Menu",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "DropdownMenu",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown/menu.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/menu/default/",
        "parameters": [
          {
            "name": "as",
            "type": "Symbol",
            "default": "`:default`",
            "description": "When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item."
          },
          {
            "name": "direction",
            "type": "Symbol",
            "default": "`:se`",
            "description": "One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.."
          },
          {
            "name": "header",
            "type": "String",
            "default": "`nil`",
            "description": "Header to be displayed above the menu."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "items",
            "description": null,
            "parameters": [
              {
                "name": "tag",
                "type": "Symbol",
                "default": "N/A",
                "description": "One of `:a`, `:button`, or `:summary`.."
              },
              {
                "name": "divider",
                "type": "Boolean",
                "default": "N/A",
                "description": "Whether the item is a divider without any function."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::FileTreeView",
    "description": "",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "FileTreeView",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "FileTreeView",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/default/",
    "parameters": [
      {
        "name": "node_variant",
        "type": "Symbol",
        "default": "`:div`",
        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
      },
      {
        "name": "form_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}."
      }
    ],
    "slots": [
      {
        "name": "nodes",
        "description": null,
        "parameters": []
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/file_tree_view/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/file_tree_view/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::FileTreeView::FileNode",
        "description": "",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "FileTreeView::FileNode",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "FileTreeViewFileNode",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view/file_node.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/file_node/default/",
        "parameters": [],
        "slots": [
          {
            "name": "leading_visual",
            "description": null,
            "parameters": []
          },
          {
            "name": "leading_action",
            "description": null,
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": null,
            "parameters": []
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::FileTreeView::DirectoryNode",
        "description": "",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "FileTreeView::DirectoryNode",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "FileTreeViewDirectoryNode",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/file_tree_view/directory_node.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/file_tree_view/directory_node/default/",
        "parameters": [],
        "slots": [
          {
            "name": "leading_visual",
            "description": null,
            "parameters": []
          },
          {
            "name": "leading_action",
            "description": null,
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": null,
            "parameters": []
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::FormButton",
    "description": "A button input rendered using the HTML `<button type=\"button\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "FormButton",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "FormButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/form_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/form_button/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::FormControl",
    "description": "Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.\n\nNOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer\nforms framework.",
    "accessibility_docs": "Because `FormControl` does not manage the actual `<input>` element, it cannot semantically connect\nthe input and its associated label. For this and other reasons, consumers are highly encouraged to\nuse Primer's pre-made form components like `TextField`, etc, ideally via the Primer forms framework.\n\nUsers of the `FormControl` component will need to manually connect the label using the `for:`\nattribute, eg:\n\n```erb\n<%= form_with(url: \"/path/somewhere\") do |f| %>\n  <%= render(Primer::Alpha::FormControl.new(label_arguments: { for: \"bar\" })) do |component| %>\n    <% component.with_input do |input_arguments| %>\n      <%= f.text_field(:bar, **input_arguments) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\nNote that the name of the field, `:bar`, is passed to both the Rails `#text_field` method _and_\nas part of the `label_arguments` passed to the `FormControl` constructor.\n\nSimilarly, `FormControl` cannot automatically connect the `<input>` element to the caption and\nvalidation message elements. The component attempts to mitigate this by including the correct\n`aria-describedby` attribute in the hash it yields to the block passed to `#with_input`. In the\nexample above, `input_arguments[:aria][:describedby]` contains the HTML IDs for both the caption\nand validation message elements, and can be passed directly to Rails' form helper methods. If the\ninput being wrapped is not generated by a Rails form helper, care must be taken to set\n`aria-describedby` manually on the input element.",
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "FormControl",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "FormControl",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/form_control.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/form_control/default/",
    "parameters": [
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "`nil`",
        "description": "Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "`nil`",
        "description": "A string displayed in red between the caption and the input indicating the input's contents are invalid."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "`false`",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "`false`",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "full_width",
        "type": "Boolean",
        "default": "`false`",
        "description": "When set to `true`, the form control will take up all the horizontal space allowed by its container."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "HTML attributes to attach to the `<label>` element that labels the input."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "caption",
        "description": "Describes the field and what sorts of input it expects. Displayed below the input.\nNote that this slot takes precedence over the `caption:` argument in the constructor.",
        "parameters": []
      },
      {
        "name": "input",
        "description": "The input content. Yields a set of {{link_to_system_arguments_docs}} that should be added to the input.",
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "required?",
        "description": "Whether or not this input is marked as required.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "visually_hide_label?",
        "description": "Whether or not to hide the label visually. The label will still be visible to screen readers.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "full_width?",
        "description": "Whether or not the form control should take up all the horizontal space allowed by its container.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/form_control/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/form_control/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/form_control/with_caption",
        "name": "with_caption",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/form_control/with_validation_message",
        "name": "with_validation_message",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/form_control/required",
        "name": "required",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/form_control/with_visually_hidden_label",
        "name": "with_visually_hidden_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::HellipButton",
    "description": "Use `HellipButton` to render a button with a hellip. Often used for hidden text expanders.",
    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.\n* Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new(\"aria-label\": \"Expand next part\")`",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "HellipButton",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "HellipButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button/default/",
    "parameters": [
      {
        "name": "inline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is inline."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/hellip_button/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/hellip_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::HiddenTextExpander",
    "description": "Use `HiddenTextExpander` to indicate and toggle hidden text.",
    "accessibility_docs": "`HiddenTextExpander` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked by the `HiddenTextExpander`. For instance,\nif your `HiddenTextExpander` expands a list of 5 comments, the `aria-label` should be\n`\"Expand 5 more comments\"` instead of `\"More\"`.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "HiddenTextExpander",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "HiddenTextExpander",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/",
    "parameters": [
      {
        "name": "inline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the expander is inline."
      },
      {
        "name": "button_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the button element."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/hidden_text_expander/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/hidden_text_expander/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Image",
    "description": "Use `Image` to render images.",
    "accessibility_docs": "Always provide a meaningful `alt`.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Image",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Image",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image/default/",
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "default": "N/A",
        "description": "The source url of the image."
      },
      {
        "name": "alt",
        "type": "String",
        "default": "N/A",
        "description": "Specifies an alternate text for the image."
      },
      {
        "name": "lazy",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to lazily load the image."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::IncludeFragment",
    "description": "Use `IncludeFragment` to load HTML elements from the server.\nAdd additional usage considerations or best practices that may aid the user to use the component correctly.",
    "accessibility_docs": "Add any accessibility considerations",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "IncludeFragment",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "IncludeFragment",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/include_fragment.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/include_fragment/default/",
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "default": "`nil`",
        "description": "The URL from which to retrieve an HTML element fragment."
      },
      {
        "name": "loading",
        "type": "Symbol",
        "default": "`nil`",
        "description": "One of `:eager` or `:lazy`."
      },
      {
        "name": "accept",
        "type": "String",
        "default": "`nil`",
        "description": "What to send as the Accept header."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/include_fragment/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/include_fragment/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Layout",
    "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won't affect the visual position.\n\nWhen using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.\nThis may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`\nwhen the sidebar content is non-essential or available elsewhere on the page.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Layout",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Layout",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/default/",
    "parameters": [
      {
        "name": "stacking_breakpoint",
        "type": "Symbol",
        "default": "`:md`",
        "description": "When the `Layout` should change from rows into columns. One of `:lg`, `:md`, or `:sm`."
      },
      {
        "name": "first_in_source",
        "type": "Symbol",
        "default": "`:sidebar`",
        "description": "Which element to render first in the HTML. This will change the keyboard navigation order. One of `:main` or `:sidebar`."
      },
      {
        "name": "gutter",
        "type": "Symbol",
        "default": "`:default`",
        "description": "The amount of space between the main section and the sidebar. One of `:condensed`, `:default`, `:none`, or `:spacious`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "main",
        "description": "The layout's main content.",
        "parameters": [
          {
            "name": "width",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:full`, `:lg`, `:md`, or `:xl`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "sidebar",
        "description": "The layout's sidebar.",
        "parameters": [
          {
            "name": "width",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:default`, `:narrow`, or `:wide`."
          },
          {
            "name": "col_placement",
            "type": "Symbol",
            "default": "N/A",
            "description": "Sidebar placement when `Layout` is in column modes. One of `:end` or `:start`."
          },
          {
            "name": "row_placement",
            "type": "Symbol",
            "default": "N/A",
            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`. **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/layout/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/gutter_none",
        "name": "gutter_none",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/gutter_condensed",
        "name": "gutter_condensed",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/gutter_default",
        "name": "gutter_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/gutter_spacious",
        "name": "gutter_spacious",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/main_width_md",
        "name": "main_width_md",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/main_width_lg",
        "name": "main_width_lg",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/main_width_xl",
        "name": "main_width_xl",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/main_width_full",
        "name": "main_width_full",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_width_narrow",
        "name": "sidebar_width_narrow",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_width_default",
        "name": "sidebar_width_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_width_wide",
        "name": "sidebar_width_wide",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_col_placement_start",
        "name": "sidebar_col_placement_start",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_col_placement_end",
        "name": "sidebar_col_placement_end",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_row_placement_start",
        "name": "sidebar_row_placement_start",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_row_placement_end",
        "name": "sidebar_row_placement_end",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/sidebar_row_placement_none",
        "name": "sidebar_row_placement_none",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/stacking_breakpoint_sm",
        "name": "stacking_breakpoint_sm",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/stacking_breakpoint_md",
        "name": "stacking_breakpoint_md",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/layout/stacking_breakpoint_lg",
        "name": "stacking_breakpoint_lg",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::Layout::Sidebar",
        "description": "The layout's sidebar content.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Layout::Sidebar",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "LayoutSidebar",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout/sidebar.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/sidebar/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Layout::Main",
        "description": "The layout's main content.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Layout::Main",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "LayoutMain",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout/main.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/main/default/",
        "parameters": [
          {
            "name": "width",
            "type": "Symbol",
            "default": "`:full`",
            "description": "One of `:full`, `:lg`, `:md`, or `:xl`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::Menu",
    "description": "Use `Menu` to create vertical lists of navigational links.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Menu",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Menu",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/menu.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/menu/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "Optional menu heading",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "items",
        "description": "Required list of navigational links",
        "parameters": [
          {
            "name": "href",
            "type": "String",
            "default": "N/A",
            "description": "URL to be used for the Link"
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether the item is the current selection"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/menu/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/menu/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::MultiInput",
    "description": "Multi inputs are comprised of multiple constituent fields, only one of which is visible\nat a given time. They are designed for situations where constituent inputs are shown or\nhidden based on the value of another field. For example, consider an address form. If\nthe user chooses the USA as the country, the region input should show a list of states\nand US territories; if the user instead chooses Canada, the region input should show a\nlist of Canadian provinces, etc.\n\nUnlike everywhere else in Primer forms, constituent inputs are not directly passed a\n`name` attribute. Instead, developers pass a `name` attribute to the multi input itself.\nThe multi input then automatically assigns each constituent input the same name. This is\ndone so that the multi input looks like a single field from the server's point of view.\nUsing the address form example from earlier, this means only one value - either a US state\nor a Canadian provice - will be submitted to the server under the `region` key.\n\nActually, that's not quite true. Constituent inputs _are_ given a `name`, but it's added to\nthe input as the `data-name` attribute as a way to identify constituent inputs, and will not\nbe sent to the server.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": true,
    "component": "MultiInput",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "MultiInput",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/multi_input.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/multi_input/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/multi_input/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/multi_input/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/multi_input/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/multi_input/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "label-title-only"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/multi_input/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::NavList",
    "description": ":nodoc:",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "NavList",
    "status": "deprecated",
    "a11y_reviewed": true,
    "short_name": "NavList",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/",
    "parameters": [
      {
        "name": "selected_item_id",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "The heading for the list at large. Accepts the arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Heading{{/link_to_component}}.",
        "parameters": []
      },
      {
        "name": "items",
        "description": "Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.",
        "parameters": []
      }
    ],
    "methods": [],
    "previews": [],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::NavList::Item",
        "description": ":nodoc:",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": true,
        "component": "NavList::Item",
        "status": "deprecated",
        "a11y_reviewed": false,
        "short_name": "NavListItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/",
        "parameters": [
          {
            "name": "selected_item_id",
            "type": "Symbol",
            "default": "`nil`",
            "description": "The ID of the currently selected list item. Used internally."
          },
          {
            "name": "selected_by_ids",
            "type": "Array<Symbol>",
            "default": "`[]`",
            "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
          },
          {
            "name": "expanded",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
          },
          {
            "name": "sub_item",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not this item is nested under a parent item. Used internally."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "items",
            "description": null,
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "description",
            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
            "parameters": [
              {
                "name": "legacy_content",
                "type": "String",
                "default": "N/A",
                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
              },
              {
                "name": "test_selector",
                "type": "String",
                "default": "N/A",
                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
              }
            ]
          },
          {
            "name": "leading_visual",
            "description": "An icon, avatar, SVG, or custom content that will render to the left of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render an SVG, call the `with_leading_visual_svg` method.\n\nTo render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.",
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": "An icon, label, counter, or text to render to the right of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}.\n\nTo render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.\n\nTo render text, call the `with_leading_visual_text` method and pass a block that returns a string. Eg:\n```ruby\nwith_leading_visual_text { \"Text here\" }\n```",
            "parameters": []
          },
          {
            "name": "trailing_action",
            "description": "A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "tooltip",
            "description": "`Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as\na last resort. **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be\nmore appropriate. Consult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
            "parameters": [
              {
                "name": "type",
                "type": "Symbol",
                "default": "`:description`",
                "description": "One of `:description` or `:label`."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::NavList::Heading",
        "description": ":nodoc:",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "NavList::Heading",
        "status": "deprecated",
        "a11y_reviewed": false,
        "short_name": "NavListHeading",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/heading.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/heading/default/",
        "parameters": [
          {
            "name": "title",
            "type": "String",
            "default": "N/A",
            "description": "The text content of the heading."
          },
          {
            "name": "id",
            "type": "String",
            "default": "`self.class.generate_id`",
            "description": "The value of the ID HTML attribute. Auto-generated by default."
          },
          {
            "name": "heading_level",
            "type": "Integer",
            "default": "`2`",
            "description": "The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::NavList::Divider",
        "description": ":nodoc:",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "NavList::Divider",
        "status": "deprecated",
        "a11y_reviewed": false,
        "short_name": "NavListDivider",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/divider.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/divider/default/",
        "parameters": [
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:subtle`",
            "description": "Display a background color if scheme is `filled`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::NavList::Group",
        "description": ":nodoc:",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": true,
        "component": "NavList::Group",
        "status": "deprecated",
        "a11y_reviewed": true,
        "short_name": "NavListGroup",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/group.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/group/default/",
        "parameters": [
          {
            "name": "selected_item_id",
            "type": "Symbol",
            "default": "`nil`",
            "description": "The ID of the currently selected item. Used internally."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "show_more_item",
            "description": "A special \"show more\" list item that appears at the bottom of the group. Clicking\nthe item will fetch the next page of results from the URL passed in the `src` argument\nand append the resulting chunk of HTML to the group.",
            "parameters": [
              {
                "name": "src",
                "type": "String",
                "default": "N/A",
                "description": "The URL to query for additional pages of list items."
              },
              {
                "name": "pages",
                "type": "Integer",
                "default": "N/A",
                "description": "The total number of pages in the result set."
              },
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "A component class to use instead of the default `Primer::Beta::NavList::Item` class."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "items",
            "description": "Items.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by `component_klass`."
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::Navigation::Tab",
    "description": "This component is part of navigation components such as `Primer::Alpha::TabNav`\nand `Primer::Alpha::UnderlineNav` and should not be used by itself.",
    "accessibility_docs": "`Tab` renders the selected anchor tab with `aria-current=\"page\"` by default.\n When the selected tab does not correspond to the current page, such as in a nested inner tab, make sure to use aria-current=\"true\"",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Navigation::Tab",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "NavigationTab",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/navigation/tab.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/navigation/tab/default/",
    "parameters": [
      {
        "name": "list",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab is an item in a `<ul>` list."
      },
      {
        "name": "selected",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab is selected or not."
      },
      {
        "name": "with_panel",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab has an associated panel."
      },
      {
        "name": "panel_id",
        "type": "String",
        "default": "`\"\"`",
        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
      },
      {
        "name": "icon_classes",
        "type": "Boolean",
        "default": "`\"\"`",
        "description": "Classes that must always be applied to icons."
      },
      {
        "name": "wrapper_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} to be used in the `<li>` wrapper when the tab is an item in a list."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "panel",
        "description": "Panel controlled by the Tab. This will not render anything in the tab itself.\nIt will provide a accessor for the Tab's parent to call and render the panel\ncontent in the appropriate place.\nRefer to `UnderlineNav` and `TabNav` implementations for examples.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "icon",
        "description": "Icon to be rendered in the Tab left.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "text",
        "description": "The Tab's text.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Text{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "counter",
        "description": "Counter to be rendered in the Tab right.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "selected",
        "description": "Returns the value of attribute selected.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::OcticonSymbols",
    "description": "OcticonSymbols renders a symbol dictionary using a list of {{link_to_octicons}}.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "OcticonSymbols",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "OcticonSymbols",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/octicon_symbols.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/octicon_symbols/default/",
    "parameters": [
      {
        "name": "icons",
        "type": "Array<Hash>",
        "default": "`[]`",
        "description": "List of icons to render, in the format { symbol: :icon_name, size: :small }"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/octicon_symbols/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/octicon_symbols/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Overlay",
    "description": "Overlay components codify design patterns related to floating surfaces such\nas dialogs and menus. They are private components intended to be used by\nspecialized components, and mostly contain presentational logic and\nbehavior.",
    "accessibility_docs": "- **Overlay Accessible Name**: An overlay should have an accessible name,\nso screen readers are aware of the purpose of the Overlay when it opens.\nGive an accessible name setting `:title`. The accessible name will be\nused as the main heading inside the Overlay.\n- **Overlay unique id**: A Overlay should be unique. Give a unique id\nsetting `:id`. If no `:id` is given, a default randomize hex id is\ngenerated.\n\nThe combination of both `:title` and `:id` establishes an\n`aria-labelledby` relationship between the title and the unique id\nof the Overlay.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Overlay",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Overlay",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/default/",
    "parameters": [
      {
        "name": "id",
        "type": "String",
        "default": "`self.class.generate_id`",
        "description": "The id of the Overlay."
      },
      {
        "name": "title",
        "type": "String",
        "default": "N/A",
        "description": "Describes the content of the Overlay."
      },
      {
        "name": "subtitle",
        "type": "String",
        "default": "`nil`",
        "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
      },
      {
        "name": "popover",
        "type": "Symbol",
        "default": "`:auto`",
        "description": "The popover behaviour. One of `:auto` or `:manual`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:auto`",
        "description": "The size of the Overlay. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
      },
      {
        "name": "padding",
        "type": "Symbol",
        "default": "`:normal`",
        "description": "The padding given to the Overlay body. One of `:condensed`, `:none`, or `:normal`."
      },
      {
        "name": "anchor",
        "type": "String",
        "default": "`nil`",
        "description": "An ID of the element to anchor onto. Defaults to the `show_button`."
      },
      {
        "name": "anchor_align",
        "type": "Symbol",
        "default": "`:start`",
        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
      },
      {
        "name": "anchor_side",
        "type": "Symbol",
        "default": "`:outside_bottom`",
        "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
      },
      {
        "name": "anchor_offset",
        "type": "Symbol",
        "default": "`:normal`",
        "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
      },
      {
        "name": "anchor_when_narrow",
        "type": "Symbol",
        "default": "`:inherit`",
        "description": "The position of the Overlay when in a narrow viewport. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
      },
      {
        "name": "allow_out_of_bounds",
        "type": "Boolean",
        "default": "`false`",
        "description": "Allow the Overlay to overflow its container."
      },
      {
        "name": "visually_hide_title",
        "type": "Boolean",
        "default": "`false`",
        "description": "If true will hide the heading title, while still making it available to Screen Readers."
      },
      {
        "name": "role",
        "type": "String",
        "default": "`nil`",
        "description": "The ARIA role. One of `nil`, `:dialog`, or `:menu`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "show_button",
        "description": "Optional button to open the Overlay.",
        "parameters": [
          {
            "name": "icon",
            "type": "String",
            "default": "N/A",
            "description": "Name of {{link_to_octicons}} to use instead of text. If provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered."
          },
          {
            "name": "controls",
            "type": "String",
            "default": "N/A",
            "description": "The ID of the menu this button controls. Used internally."
          },
          {
            "name": "button_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} depending on the presence of the `icon:` argument."
          }
        ]
      },
      {
        "name": "header",
        "description": "Header content.",
        "parameters": [
          {
            "name": "divider",
            "type": "Boolean",
            "default": "N/A",
            "description": "Show a divider between the header and body."
          },
          {
            "name": "size",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`.."
          },
          {
            "name": "visually_hide_title",
            "type": "Boolean",
            "default": "N/A",
            "description": "Visually hide the `title` while maintaining a label for assistive technologies."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "body",
        "description": "Required body content.",
        "parameters": [
          {
            "name": "padding",
            "type": "Symbol",
            "default": "N/A",
            "description": "The padding. One of `:condensed`, `:none`, or `:normal`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "footer",
        "description": "Footer content.",
        "parameters": [
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "N/A",
            "description": "Show a divider between the footer and body."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/overlay/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/overlay/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/overlay/middle_of_page",
        "name": "middle_of_page",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/overlay/middle_of_page_with_relative_container",
        "name": "middle_of_page_with_relative_container",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/overlay/in_a_sticky_container",
        "name": "in_a_sticky_container",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::Overlay::Header",
        "description": "A `Overlay::Header` is a compositional component, used to render the\nHeader of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Overlay::Header",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "OverlayHeader",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay/header.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/header/default/",
        "parameters": [
          {
            "name": "title",
            "type": "String",
            "default": "N/A",
            "description": "Describes the content of the Overlay."
          },
          {
            "name": "subtitle",
            "type": "String",
            "default": "`nil`",
            "description": "Provides additional context for the Overlay, also setting the `aria-describedby` attribute."
          },
          {
            "name": "overlay_id",
            "type": "String",
            "default": "`nil`",
            "description": "Provides the id of the overlay element so the close button can close it"
          },
          {
            "name": "size",
            "type": "Symbol",
            "default": "`:medium`",
            "description": "The size of the Header. One of `:large` or `:medium`."
          },
          {
            "name": "divider",
            "type": "Boolean",
            "default": "`false`",
            "description": "Show a divider between the header and body."
          },
          {
            "name": "visually_hide_title",
            "type": "Boolean",
            "default": "`false`",
            "description": "Visually hide the `title` while maintaining a label for assistive technologies."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "filter",
            "description": "Optional filter slot for adding a filter input to the header.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          },
          {
            "name": "subtitle",
            "description": "Optional subtitle slot for adding a subtitle to the header.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Overlay::Footer",
        "description": "A `Overlay::Footer` is a compositional component, used to render the\nFooter of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Overlay::Footer",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "OverlayFooter",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay/footer.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/footer/default/",
        "parameters": [
          {
            "name": "show_divider",
            "type": "Boolean",
            "default": "`false`",
            "description": "Show a divider between the footer and body."
          },
          {
            "name": "align_content",
            "type": "Symbol",
            "default": "`DEFAULT_ALIGN_CONTENT`",
            "description": "The alginment of contents. One of `:center`, `:end`, or `:start`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::Overlay::Body",
        "description": "A `Overlay::Body` is a compositional component, used to render the\nBody of an overlay. See {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Overlay::Body",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "OverlayBody",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay/body.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/body/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::RadioButton",
    "description": "Radio buttons represent one of a set of options and are rendered as `<input type=\"radio\">` in HTML.\n**NOTE**: You probably want to use the {{#link_to_component}}Primer::Alpha::RadioButtonGroup{{/link_to_component}}\ncomponent instead, as it allows rendering a group of options.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "RadioButton",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "RadioButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/radio_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/radio_button/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/radio_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button/checked",
        "name": "checked",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::RadioButtonGroup",
    "description": "A group of mutually exclusive radio buttons.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "RadioButtonGroup",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "RadioButtonGroup",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/radio_button_group.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/radio_button_group/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the group."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the group."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be marked as invalid. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      }
    ],
    "slots": [],
    "methods": [
      {
        "name": "radio_button",
        "description": "Adds a radio button to the group.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::RadioButton{{/link_to_component}}."
          },
          {
            "name": "block",
            "type": "Proc",
            "default": "N/A",
            "description": "The block accepted by {{#link_to_component}}Primer::Alpha::RadioButton{{/link_to_component}}."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/radio_button_group/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/invalid",
        "name": "invalid",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/full_width",
        "name": "full_width",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/radio_button_group/disabled",
        "name": "disabled",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::SegmentedControl",
    "description": "Use a segmented control to let users select an option from a short list and immediately apply the selection",
    "accessibility_docs": "A `SegmentedControl` should not be used in a form as a replacement for something like a radio group or select.\nSee the [Accessibility section](https://primer.style/design/components/segmented-control#accessibility) of the SegmentedControl interface guidelines for more details.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "SegmentedControl",
    "status": "alpha",
    "a11y_reviewed": true,
    "short_name": "SegmentedControl",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
    "parameters": [
      {
        "name": "hide_labels",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to hide the labels and only show the icons"
      },
      {
        "name": "full_width",
        "type": "Boolean",
        "default": "`false`",
        "description": "If the component should be full width"
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "items",
        "description": "Use to render an item in the segmented control",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/segmented_control/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/full_width_small",
        "name": "full_width_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/full_width_medium",
        "name": "full_width_medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icons_and_text_small",
        "name": "icons_and_text_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icons_and_text_medium",
        "name": "icons_and_text_medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
        "name": "trailing_label_width_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/trailing_label_width_medium",
        "name": "trailing_label_width_medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icon_only_small",
        "name": "icon_only_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icon_only_medium",
        "name": "icon_only_medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
        "name": "icon_only_full_width_small",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/icon_only_full_width_medium",
        "name": "icon_only_full_width_medium",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/with_link_as_tag",
        "name": "with_link_as_tag",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/with_subhead_actions",
        "name": "with_subhead_actions",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/segmented_control/with_label_and_caption",
        "name": "with_label_and_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::SegmentedControl::Item",
        "description": "SegmentedControl::Item is a private component that is only used by SegmentedControl\nIt wraps the Button and IconButton components to provide the correct styles",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "SegmentedControl::Item",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "SegmentedControlItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/item/default/",
        "parameters": [
          {
            "name": "label",
            "type": "String",
            "default": "N/A",
            "description": "The label to use"
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether the item is selected"
          },
          {
            "name": "icon",
            "type": "Symbol",
            "default": "`nil`",
            "description": "The icon to use"
          },
          {
            "name": "hide_labels",
            "type": "Symbol",
            "default": "`false`",
            "description": "Whether to only show the icon"
          }
        ],
        "slots": [
          {
            "name": "trailing_visual_label",
            "description": "Optional trailing Label",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "with_trailing_visual_label",
            "description": "Optional trailing label.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::Select",
    "description": "Select lists are single-line text inputs rendered as `<select>` tags in HTML.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "Select",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Select",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select/default/",
    "parameters": [
      {
        "name": "size",
        "type": "Symbol",
        "default": "N/A",
        "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      },
      {
        "name": "multiple",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to true, the selection will allow multiple choices."
      },
      {
        "name": "include_blank",
        "type": "Boolean, String",
        "default": "N/A",
        "description": "If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty."
      },
      {
        "name": "prompt",
        "type": "String",
        "default": "N/A",
        "description": "Create a prompt option with blank value and the text asking user to select something."
      }
    ],
    "slots": [],
    "methods": [
      {
        "name": "option",
        "description": "Adds an option to the list.",
        "parameters": [
          {
            "name": "label",
            "type": "String",
            "default": "N/A",
            "description": "The user-facing label for the option."
          },
          {
            "name": "value",
            "type": "String",
            "default": "N/A",
            "description": "The value sent to the server on form submission."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/select/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/not_full_width",
        "name": "not_full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/invalid",
        "name": "invalid",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select/with_validation_message",
        "name": "with_validation_message",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::SelectPanel",
    "description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n  <% panel.with_show_button { \"Select item\" } %>\n  <% panel.with_item(label: \"Item 1\") %>\n  <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n  Primer::Alpha::SelectPanel.new(\n    fetch_strategy: :remote,\n    src: search_items_path  # perhaps a Rails URL helper\n  )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n  def show\n    # NOTE: params[:q] may be nil since there is no filter string available\n    # when the panel is first opened\n    @results = SomeModel.search(params[:q] || \"\")\n  end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% @results.each do |result| %>\n    <% list.with_item(label: result.title) do |item| %>\n      <% item.with_description(result.description) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n    results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n    field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n    to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n  // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field. Each list item must also have a value specified in\n`content_arguments: { data: { value: } }`.\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n  <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n    <% countries.each do |country|\n      <% menu.with_item(label: country.name, content_arguments: { data: { value: country.code } }) %>\n    <% end %>\n  <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label.  Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n  def create\n    puts \"You chose #{address_params[:country]} as your country\"\n  end\n\n  private\n\n  def address_params\n    params.require(:address).permit(:country)\n  end\nend\n```\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n  <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n  <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name                 |Type                                       |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated`      |`CustomEvent<ItemActivatedEvent>`          |Yes     |No         |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>`          |Yes     |Yes        |\n|`dialog:open`        |`CustomEvent<{dialog: HTMLDialogElement}>` |No      |No         |\n|`panelClosed`        |`CustomEvent<{panel: SelectPanelElement}>` |Yes     |No         |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"itemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item     // Element: the <li> item that was activated\n    event.detail.checked  // boolean: whether or not the result of the activation checked the item\n  }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"beforeItemActivated\",\n  (event: CustomEvent<ItemActivatedEvent>) => {\n    event.detail.item      // Element: the <li> item that was activated\n    event.detail.checked   // boolean: whether or not the result of the activation checked the item\n    event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n  }\n)\n```",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "SelectPanel",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "SelectPanel",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "default": "`nil`",
        "description": "The URL to fetch search results from."
      },
      {
        "name": "title",
        "type": "String",
        "default": "`\"Menu\"`",
        "description": "The title that appears at the top of the panel."
      },
      {
        "name": "id",
        "type": "String",
        "default": "`self.class.generate_id`",
        "description": "The unique ID of the panel."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:small`",
        "description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
      },
      {
        "name": "select_variant",
        "type": "Symbol",
        "default": "`:single`",
        "description": "One of `:multiple`, `:none`, or `:single`."
      },
      {
        "name": "fetch_strategy",
        "type": "Symbol",
        "default": "`:remote`",
        "description": "One of `:eventually_local`, `:local`, or `:remote`."
      },
      {
        "name": "no_results_label",
        "type": "String",
        "default": "`\"No results found\"`",
        "description": "The label to display when no results are found."
      },
      {
        "name": "preload",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
      },
      {
        "name": "dynamic_label",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to display the text of the currently selected item in the show button."
      },
      {
        "name": "dynamic_label_prefix",
        "type": "String",
        "default": "`nil`",
        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
      },
      {
        "name": "dynamic_aria_label_prefix",
        "type": "String",
        "default": "`nil`",
        "description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
      },
      {
        "name": "body_id",
        "type": "String",
        "default": "`nil`",
        "description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
      },
      {
        "name": "list_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}} component. Only has an effect for the local fetch strategy."
      },
      {
        "name": "form_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Form arguments. Supported for all fetch strategies."
      },
      {
        "name": "show_filter",
        "type": "Boolean",
        "default": "`true`",
        "description": "Whether or not to show the filter input."
      },
      {
        "name": "open_on_load",
        "type": "Boolean",
        "default": "`false`",
        "description": "Open the panel when the page loads."
      },
      {
        "name": "anchor_align",
        "type": "Symbol",
        "default": "`:start`",
        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
      },
      {
        "name": "anchor_side",
        "type": "Symbol",
        "default": "`:outside_bottom`",
        "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
      },
      {
        "name": "loading_label",
        "type": "String",
        "default": "`\"Loading content...\"`",
        "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
      },
      {
        "name": "loading_description",
        "type": "String",
        "default": "`nil`",
        "description": "The description to use when the panel is loading. If not provided, no description will be used."
      },
      {
        "name": "banner_scheme",
        "type": "Symbol",
        "default": "`:danger`",
        "description": "The scheme for the error banner One of `:danger` or `:warning`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "footer",
        "description": "Renders content in a footer region below the list of items.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Footer{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "subtitle",
        "description": "Renders content underneath the title at the top of the panel.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Header{{/link_to_component}}'s `subtitle` slot."
          }
        ]
      },
      {
        "name": "show_button",
        "description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
        "parameters": [
          {
            "name": "icon",
            "type": "String",
            "default": "N/A",
            "description": "Name of {{link_to_octicons}} to use instead of text. If an [icon](https://primer.style/octicons/usage-guidelines/) is provided, a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will be rendered. Otherwise a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} will be rendered."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "preload_error_content",
        "description": "Customizable content for the error message that appears when items are fetched for the first time. This message\nappears in place of the list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
        "parameters": []
      },
      {
        "name": "error_content",
        "description": "Customizable content for the error message that appears when items are fetched as the result of a filter\noperation. This message appears as a banner above the previously fetched list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "src",
        "description": "The URL to fetch search results from.",
        "parameters": [],
        "return_types": [
          "String"
        ]
      },
      {
        "name": "panel_id",
        "description": "The unique ID of the panel.",
        "parameters": [],
        "return_types": [
          "String"
        ]
      },
      {
        "name": "body_id",
        "description": "The unique ID of the panel body.",
        "parameters": [],
        "return_types": [
          "String"
        ]
      },
      {
        "name": "select_variant",
        "description": "One of `:multiple`, `:none`, or `:single`.",
        "parameters": [],
        "return_types": [
          "Symbol"
        ]
      },
      {
        "name": "banner_scheme",
        "description": "One of `:danger` or `:warning`.",
        "parameters": [],
        "return_types": [
          "Symbol"
        ]
      },
      {
        "name": "fetch_strategy",
        "description": "One of `:eventually_local`, `:local`, or `:remote`.",
        "parameters": [],
        "return_types": [
          "Symbol"
        ]
      },
      {
        "name": "preload",
        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "preload?",
        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "show_filter",
        "description": "Whether or not to show the filter input.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "show_filter?",
        "description": "Whether or not to show the filter input.",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      },
      {
        "name": "with_item",
        "description": "Adds an item to the list. Note that this method only has an effect for the local fetch strategy.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/select_panel/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/local_fetch",
        "name": "local_fetch",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/eventually_local_fetch",
        "name": "eventually_local_fetch",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/remote_fetch",
        "name": "remote_fetch",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/custom_loading_label",
        "name": "custom_loading_label",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/custom_loading_description",
        "name": "custom_loading_description",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
        "name": "local_fetch_no_results",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
        "name": "eventually_local_fetch_no_results",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
        "name": "remote_fetch_no_results",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/single_select",
        "name": "single_select",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/multiselect",
        "name": "multiselect",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_dynamic_label",
        "name": "with_dynamic_label",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_dynamic_label_and_aria_prefix",
        "name": "with_dynamic_label_and_aria_prefix",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/footer_buttons",
        "name": "footer_buttons",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_avatar_items",
        "name": "with_avatar_items",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
        "name": "select_panel_with_icon_button",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_leading_icons",
        "name": "with_leading_icons",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_trailing_icons",
        "name": "with_trailing_icons",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/with_subtitle",
        "name": "with_subtitle",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
        "name": "remote_fetch_initial_failure",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
        "name": "remote_fetch_filter_failure",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
        "name": "eventually_local_fetch_initial_failure",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/single_select_form",
        "name": "single_select_form",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/remote_fetch_form",
        "name": "remote_fetch_form",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/multiselect_form",
        "name": "multiselect_form",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/list_of_links",
        "name": "list_of_links",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/no_values",
        "name": "no_values",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/select_panel/scroll_container",
        "name": "scroll_container",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList",
        "description": "The component that should be used to render the list of items in the body of a SelectPanel.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": true,
        "component": "SelectPanel::ItemList",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "SelectPanelItemList",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by `component_klass`."
              }
            ]
          },
          {
            "name": "items",
            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
            "parameters": []
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::SkeletonBox",
    "description": "A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)\nthat are still loading. You can adjust width and height to match the content's dimensions.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "SkeletonBox",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "SkeletonBox",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/skeleton_box.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/skeleton_box/default/",
    "parameters": [
      {
        "name": "height",
        "type": "String",
        "default": "`nil`",
        "description": "Any valid CSS height."
      },
      {
        "name": "width",
        "type": "String",
        "default": "`nil`",
        "description": "Any valid CSS width."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/skeleton_box/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/skeleton_box/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Stack",
    "description": "Stack is a layout component that creates responsive horizontal and vertical flows.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Stack",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Stack",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "Customize the element type of the rendered container."
      },
      {
        "name": "gap",
        "type": "Symbol",
        "default": "`GapArg::DEFAULT`",
        "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
      },
      {
        "name": "direction",
        "type": "Symbol",
        "default": "`:vertical`",
        "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
      },
      {
        "name": "align",
        "type": "Symbol",
        "default": "`:stretch`",
        "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
      },
      {
        "name": "wrap",
        "type": "Symbol",
        "default": "`:nowrap`",
        "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
      },
      {
        "name": "justify",
        "type": "Symbol",
        "default": "`:start`",
        "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
      },
      {
        "name": "padding",
        "type": "Symbol",
        "default": "`:none`",
        "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/stack/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/stack/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::StackItem",
    "description": "StackItem is a layout component designed to be used as the child of a Stack.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "StackItem",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "StackItem",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "Customize the element type of the rendered container."
      },
      {
        "name": "grow",
        "type": "Boolean",
        "default": "`false`",
        "description": "Allow item to keep size or expand to fill the available space."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/stack_item/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/stack_item/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::SubmitButton",
    "description": "A submit button input rendered using the HTML `<button type=\"submit\">` tag.\n\nThis component wraps the Primer button component and supports the same slots and arguments.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "SubmitButton",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "SubmitButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/submit_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/submit_button/default/",
    "parameters": [
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TabContainer",
    "description": "Use `TabContainer` to create tabbed content with keyboard support. This component does not add any styles.\nIt only provides the tab functionality. If you want styled Tabs you can look at {{#link_to_component}}Primer::Alpha::TabNav{{/link_to_component}}.\n\nThis component requires javascript.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "TabContainer",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TabContainer",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TabNav",
    "description": "Use `TabNav` to style navigation with a tab-based selected state, typically used for navigation placed at the top of the page.\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::TabPanels{{/link_to_component}} instead.",
    "accessibility_docs": "- By default, `TabNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "TabNav",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TabNav",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:nav`",
        "description": "One of `:div` or `:nav`."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
      },
      {
        "name": "body_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "tabs",
        "description": "Tabs to be rendered. For more information, refer to {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}}.",
        "parameters": [
          {
            "name": "selected",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether the tab is selected."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "extra",
        "description": "Renders extra content to the `TabNav`. This will be rendered after the tabs.",
        "parameters": [
          {
            "name": "align",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:left` or `:right`."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/tab_nav/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tab_nav/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tab_nav/with_icons_and_counters",
        "name": "with_icons_and_counters",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tab_nav/with_extra",
        "name": "with_extra",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TabPanels",
    "description": "Use `TabPanels` for tabs with panel navigation.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "TabPanels",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TabPanels",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/",
    "parameters": [
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
      },
      {
        "name": "align",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:left` or `:right`. - Defaults to left"
      },
      {
        "name": "body_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
      },
      {
        "name": "wrapper_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "tabs",
        "description": "Tabs to be rendered. For more information, refer to {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}}.",
        "parameters": [
          {
            "name": "id",
            "type": "String",
            "default": "N/A",
            "description": "Unique ID of tab."
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether the tab is selected."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "extra",
        "description": "Renders extra content to the `TabPanels`. This will be rendered after the tabs.",
        "parameters": [
          {
            "name": "align",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:left` or `:right`."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/tab_panels/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tab_panels/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tab_panels/with_extra",
        "name": "with_extra",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TextArea",
    "description": "Text areas are multi-line text inputs rendered using the `<textarea>` tag in HTML.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": false,
    "component": "TextArea",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TextArea",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_area.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_area/default/",
    "parameters": [
      {
        "name": "full_width",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
      },
      {
        "name": "character_limit",
        "type": "Number",
        "default": "N/A",
        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
      },
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/text_area/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/not_full_width",
        "name": "not_full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/invalid",
        "name": "invalid",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/with_validation_message",
        "name": "with_validation_message",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/with_character_limit",
        "name": "with_character_limit",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
        "name": "with_character_limit_over_limit",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_area/with_character_limit_and_caption",
        "name": "with_character_limit_and_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TextField",
    "description": "Text fields are single-line text inputs rendered as `<input type=\"text\">` in HTML.",
    "accessibility_docs": null,
    "is_form_component": true,
    "is_published": true,
    "requires_js": true,
    "component": "TextField",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TextField",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/",
    "parameters": [
      {
        "name": "size",
        "type": "Symbol",
        "default": "N/A",
        "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "full_width",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the field will take up all the horizontal space allowed by its container. Defaults to `true`."
      },
      {
        "name": "character_limit",
        "type": "Number",
        "default": "N/A",
        "description": "Optional character limit for the input. If provided, a character counter will be displayed below the input."
      },
      {
        "name": "name",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML name attribute."
      },
      {
        "name": "id",
        "type": "String",
        "default": "N/A",
        "description": "Value for the HTML id attribute."
      },
      {
        "name": "class",
        "type": "String",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
      },
      {
        "name": "classes",
        "type": "Array",
        "default": "N/A",
        "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
      },
      {
        "name": "caption",
        "type": "String",
        "default": "N/A",
        "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Label text displayed above the input."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, the input will not accept keyboard or mouse input."
      },
      {
        "name": "hidden",
        "type": "Boolean",
        "default": "N/A",
        "description": "When set to `true`, visually hides the field."
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "N/A",
        "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
      },
      {
        "name": "validation_message",
        "type": "String",
        "default": "N/A",
        "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
      },
      {
        "name": "label_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
      },
      {
        "name": "scope_name_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "scope_id_to_model",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
      },
      {
        "name": "required",
        "type": "Boolean",
        "default": "N/A",
        "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
      },
      {
        "name": "aria",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
      },
      {
        "name": "data",
        "type": "Hash",
        "default": "N/A",
        "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
      },
      {
        "name": "placeholder",
        "type": "String",
        "default": "N/A",
        "description": "Placeholder text."
      },
      {
        "name": "inset",
        "type": "Boolean",
        "default": "N/A",
        "description": "If `true`, renders the input in a visually inset state."
      },
      {
        "name": "monospace",
        "type": "Boolean",
        "default": "N/A",
        "description": "If `true`, uses a monospace font for the input field."
      },
      {
        "name": "auto_check_src",
        "type": "String",
        "default": "N/A",
        "description": "When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message."
      },
      {
        "name": "leading_visual",
        "type": "Hash",
        "default": "N/A",
        "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}} component."
      },
      {
        "name": "leading_spinner",
        "type": "Boolean",
        "default": "N/A",
        "description": "If `true`, a leading spinner will be included in the markup. The spinner can be shown via the `showLeadingSpinner()` JavaScript method, and hidden via `hideLeadingSpinner()`. If this argument is `true`, a leading visual must also be provided."
      },
      {
        "name": "show_clear_button",
        "type": "Boolean",
        "default": "N/A",
        "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
      },
      {
        "name": "clear_button_id",
        "type": "String",
        "default": "N/A",
        "description": "The HTML id attribute of the clear button."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/text_field/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/size_small",
        "name": "size_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/size_medium",
        "name": "size_medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/size_large",
        "name": "size_large",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_caption",
        "name": "with_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/show_clear_button",
        "name": "show_clear_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/show_clear_button_with_custom_label",
        "name": "show_clear_button_with_custom_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/not_full_width",
        "name": "not_full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/invalid",
        "name": "invalid",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_placeholder",
        "name": "with_placeholder",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/inset",
        "name": "inset",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/monospace",
        "name": "monospace",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_trailing_icon",
        "name": "with_trailing_icon",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_trailing_text",
        "name": "with_trailing_text",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_trailing_long_text",
        "name": "with_trailing_long_text",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_trailing_counter",
        "name": "with_trailing_counter",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_trailing_label",
        "name": "with_trailing_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_leading_visual",
        "name": "with_leading_visual",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_validation_message",
        "name": "with_validation_message",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_character_limit",
        "name": "with_character_limit",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
        "name": "with_character_limit_over_limit",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_character_limit_and_caption",
        "name": "with_character_limit_and_caption",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_auto_check_ok",
        "name": "with_auto_check_ok",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_auto_check_accepted",
        "name": "with_auto_check_accepted",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_auto_check_error",
        "name": "with_auto_check_error",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/with_data_target",
        "name": "with_data_target",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/input_group_leading_button",
        "name": "input_group_leading_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/input_group_trailing_button",
        "name": "input_group_trailing_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/text_field/input_group_leading_action_menu",
        "name": "input_group_leading_action_menu",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::ToggleSwitch",
    "description": "The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for\nsettings that should cause an immediate update. If configured with a \"src\" attribute, the component will\nmake a POST request containing data of the form \"value: 0 | 1\".",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "ToggleSwitch",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "ToggleSwitch",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/",
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "default": "`nil`",
        "description": "The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests."
      },
      {
        "name": "csrf_token",
        "type": "String",
        "default": "`nil`",
        "description": "A CSRF token that will be sent to the server as \"authenticity_token\" when the toggle switch is toggled. Unused if `src` is `nil`."
      },
      {
        "name": "checked",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the toggle switch is on or off."
      },
      {
        "name": "enabled",
        "type": "Boolean",
        "default": "`true`",
        "description": "Whether or not the toggle switch responds to user input."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "What size toggle switch to render. One of `:medium` or `:small`."
      },
      {
        "name": "status_label_position",
        "type": "Symbol",
        "default": "`:start`",
        "description": "Which side of the toggle switch to render the status label. One of `:end` or `:start`."
      },
      {
        "name": "turbo",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to request a turbo stream and render the response as such."
      },
      {
        "name": "autofocus",
        "type": "Boolean",
        "default": "`nil`",
        "description": "Whether switch should be autofocused when rendered."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      },
      {
        "name": "on_label",
        "type": "String",
        "default": "`nil`",
        "description": "Custom label to show when the switch is ON. Defaults to On. Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Hide\" when the switch is ON."
      },
      {
        "name": "off_label",
        "type": "String",
        "default": "`nil`",
        "description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
      },
      {
        "name": "button_type",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The type attribute for the underlying button element. If `nil`, the button will not have a type attribute, which means it will default to \"submit\" if it's inside a form and \"button\" otherwise."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/toggle_switch/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/checked",
        "name": "checked",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/disabled",
        "name": "disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/checked_disabled",
        "name": "checked_disabled",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/small",
        "name": "small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_status_label_position_end",
        "name": "with_status_label_position_end",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_a_bad_src",
        "name": "with_a_bad_src",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_no_src",
        "name": "with_no_src",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_csrf_token",
        "name": "with_csrf_token",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_bad_csrf_token",
        "name": "with_bad_csrf_token",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_turbo",
        "name": "with_turbo",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/toggle_switch/with_autofocus",
        "name": "with_autofocus",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region",
            "button-name"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::Tooltip",
    "description": "`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n\nSemantically, a tooltip will either act as an accessible name or an accessible description for the element that it is associated with resulting in either an\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Tooltip",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "Tooltip",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
    "parameters": [
      {
        "name": "for_id",
        "type": "String",
        "default": "N/A",
        "description": "The ID of the element that the tooltip should be attached to."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:description` or `:label`."
      },
      {
        "name": "direction",
        "type": "Symbol",
        "default": "`:s`",
        "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
      },
      {
        "name": "text",
        "type": "String",
        "default": "N/A",
        "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [
      {
        "name": "id",
        "description": "Returns the value of attribute id.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/tooltip/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/description_tooltip_on_button_with_existing_describedby",
        "name": "description_tooltip_on_button_with_existing_describedby",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/with_right_most_position",
        "name": "with_right_most_position",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/with_multiple_on_a_page",
        "name": "with_multiple_on_a_page",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_with_button",
        "name": "tooltip_with_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_with_link",
        "name": "tooltip_with_link",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_with_icon_button",
        "name": "tooltip_with_icon_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_inside_primer_overlay",
        "name": "tooltip_inside_primer_overlay",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_with_dialog_moving_focus_to_input",
        "name": "tooltip_with_dialog_moving_focus_to_input",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_n",
        "name": "tooltip_n",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_s",
        "name": "tooltip_s",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_e",
        "name": "tooltip_e",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_w",
        "name": "tooltip_w",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_se",
        "name": "tooltip_se",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_sw",
        "name": "tooltip_sw",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_ne",
        "name": "tooltip_ne",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tooltip/tooltip_nw",
        "name": "tooltip_nw",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::TreeView",
    "description": "TreeView is a hierarchical list of items that may have a parent-child relationship where children\ncan be toggled into view by expanding or collapsing their parent item.\n\n## Terminology\n\nConsider the following tree structure:\n\nsrc\n├ button.rb\n└ action_list\n  ├ item.rb\n  └ header.rb\n\n1. **Node**. A node is an item in the tree. Nodes can either be \"leaf\" nodes (i.e. have no children), or \"sub-tree\"\nnodes, which do have children. In the example above, button.rb, item.rb, and header.rb are all leaf nodes, while\naction_list is a sub-tree node.\n2. **Path**. A node's path is like its ID. It's an array of strings containing the current node's label and all the\nlabels of its ancestors, in order. In the example above, header.rb's path is [\"src\", \"action_list\", \"header.rb\"].\n\n## Static nodes\n\nThe `TreeView` component allows items to be provided statically or loaded dynamically from the server.\nProviding items statically is done using the `leaf` and `sub_tree` slots:\n\n```erb\n<%= render(Primer::Alpha::TreeView.new) do |tree| %>\n  <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n    <% sub_tree.with_leaf(label: \"File 1\")\n  <% end %>\n  <% tree.with_leaf(label: \"File 2\") %>\n<% end %>\n```\n\n## Dynamic nodes\n\nTree nodes can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of nodes. Unlike other Primer components, `TreeView` allows the programmer to specify\nloading behavior on a per-sub-tree basis, i.e. each sub-tree must specify how its nodes are loaded. To load nodes\ndynamically for a given sub-tree, configure it with either a loading spinner or a loading skeleton, and provide\nthe URL to fetch nodes from:\n\n```erb\n<%= render(Primer::Alpha::TreeView.new) do |tree| %>\n  <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n    <% sub_tree.with_loading_spinner(src: primer_view_components.tree_view_items_path) %>\n  <% end %>\n<% end %>\n```\n\nDefine a controller action to serve the list of nodes. The `TreeView` component automatically includes the\nsub-tree's path as a GET parameter, encoded as a JSON array.\n\n```ruby\nclass TreeViewItemsController < ApplicationController\n  def show\n    @path = JSON.parse(params[:path])\n    @results = get_tree_items(starting_at: path)\n  end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>\n  <% tree.with_leaf(...) %>\n  <% tree.with_sub_tree(...) do |sub_tree| %>\n    ...\n  <% end %>\n<% end %>\n```\n\n## Multi-select mode\n\nPassing `select_variant: :multiple` to both sub-tree and leaf nodes will add a check box to the left of the node's\nlabel. These check boxes behave according to the value of a second argument, `select_strategy:`.\n\nThe default select strategy, `:descendants`, will cause all child nodes to be checked when the node is checked.\nThis includes both sub-tree and leaf nodes. When the node is unchecked, all child nodes will also be unchecked.\nUnchecking a child node of a checked parent will cause the parent to enter a mixed or indeterminate state, which\nis represented by a horizontal line icon instead of a check mark. This icon indicates that some children are\nchecked, but not all.\n\nA secondary select strategy, `:self`, is provided to allow disabling the automatic checking of child nodes. When\n`select_strategy: :self` is specified, checking sub-tree nodes does not check child nodes, and sub-tree nodes\ncannot enter a mixed or indeterminate state.\n\nNodes can be checked via the keyboard by pressing the space key.\n\n## Node tags\n\n`TreeView`s support three different node variants, `:anchor`, `:button`, and `:div` (the default), which controls\nwhich HTML tag is used to construct the nodes. The `:anchor` and `:button` variants correspond to `<a>` and\n`<button>` tags respectively, which are browser-native elements. Anchors and buttons can be activated (i.e.\n\"clicked\") using the mouse or keyboard via the enter or space keys. The node variant must be the same for all\nnodes in the tree, and is therefore specified at the root level, eg. `TreeView.new(node_variant: :anchor)`.\n\nTrees with node variants other than `:div` cannot have check boxes, i.e. cannot be put into multi-select mode.\n\nTrees with node variants other than `:div` do not emit the `treeViewNodeActivated` or `treeViewBeforeNodeActivated`\nevents, since it is assumed any behavior associated with these variants is user- or browser-defined.\n\n## Interaction behavior matrix\n\n|Interaction     |Select variant|Tag          |Result                     |\n|:---------------|:-------------|:------------|:--------------------------|\n|Enter/space     |none          |div          |Expands/collapses          |\n|Enter/space     |none          |anchor/button|Activates anchor/button    |\n|Enter/space     |multiple      |div          |Checks or unchecks         |\n|Enter/space     |multiple      |anchor/button|N/A (not allowed)          |\n|Left/right arrow|none          |div          |Expands/collapses          |\n|Left/right arrow|none          |anchor/button|Expands/collapses          |\n|Left/right arrow|multiple      |div          |Expands/collapses          |\n|Left/right arrow|multiple      |anchor/button|N/A (not allowed)          |\n|Click           |none          |div          |Expands/collapses          |\n|Click           |multiple      |div          |Checks or unchecks         |\n|Click           |multiple      |anchor/button|N/A (not allowed)          |\n\n## JavaScript API\n\n`TreeView`s render a `<tree-view>` custom element that exposes behavior to the client.\n\n|Name                                                              |Notes                                                                                                                                             |\n|:-----------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n|`getNodePath(node: Element): string[]`                            |Returns the path to the given node.                                                                                                               |\n|`getNodeType(node: Element): TreeViewNodeType | null`             |Returns either `\"leaf\"` or `\"sub-tree\"`.                                                                                                          |\n|`markCurrentAtPath(path: string[])`                               |Marks the node as the \"current\" node, which appears visually distinct from other nodes.                                                           |\n|`get currentNode(): HTMLLIElement | null`                         |Returns the current node.                                                                                                                         |\n|`expandAtPath(path: string[])`                                    |Expands the sub-tree at `path`.                                                                                                                   |\n|`collapseAtPath(path: string[])`                                  |Collapses the sub-tree at `path`.                                                                                                                 |\n|`toggleAtPath(path: string[])`                                    |If the sub-tree at `path` is collapsed, this function expands it, and vice-versa.                                                                 |\n|`checkAtPath(path: string[])`                                     |If the node at `path` has a checkbox, this function checks it.                                                                                    |\n|`uncheckAtPath(path: string[])`                                   |If the node at `path` has a checkbox, this function unchecks it.                                                                                  |\n|`toggleCheckedAtPath(path: string[])`                             |If the sub-tree at `path` is checked, this function unchecks it, and vice-versa.                                                                  |\n|`checkedValueAtPath(path: string[]): TreeViewCheckedValue`        |Returns `\"true\"` (all child nodes are checked), `\"false\"` (no child nodes are checked), or `\"mixed\"` (some child nodes are checked, some are not).|\n|`nodeAtPath(path: string[], selector?: string): Element | null`   |Returns the node for the given `path`, either a leaf node or sub-tree node.                                                                       |\n|`subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null`|Returns the sub-tree at the given `path`, if it exists.                                                                                           |\n|`leafAtPath(path: string[]): HTMLLIElement | null`                |Returns the leaf node at the given `path`, if it exists.                                                                                          |\n|`getNodeCheckedValue(node: Element): TreeViewCheckedValue`        |The same as `checkedValueAtPath`, but accepts a node instead of a path.                                                                           |\n\n### Events\n\nThe events enumerated below include node information by way of the `TreeViewNodeInfo` object, which has the\nfollowing signature:\n\n```typescript\ntype TreeViewNodeType = 'leaf' | 'sub-tree'\ntype TreeViewCheckedValue = 'true' | 'false' | 'mixed'\n\ntype TreeViewNodeInfo = {\n  node: Element\n  type: TreeViewNodeType\n  path: string[]\n  checkedValue: TreeViewCheckedValue\n  previousCheckedValue: TreeViewCheckedValue\n}\n```\n\n|Name                         |Type                                       |Bubbles |Cancelable |\n|:----------------------------|:------------------------------------------|:-------|:----------|\n|`treeViewNodeActivated`      |`CustomEvent<TreeViewNodeInfo>`            |Yes     |No         |\n|`treeViewBeforeNodeActivated`|`CustomEvent<TreeViewNodeInfo>`            |Yes     |Yes        |\n|`treeViewNodeExpanded`       |`CustomEvent<TreeViewNodeInfo>>`           |Yes     |No         |\n|`treeViewNodeCollapsed`      |`CustomEvent<TreeViewNodeInfo>>`           |Yes     |No         |\n|`treeViewNodeChecked`        |`CustomEvent<TreeViewNodeInfo[]>`          |Yes     |Yes        |\n|`treeViewBeforeNodeChecked`  |`CustomEvent<TreeViewNodeInfo[]>`          |Yes     |No         |\n\n_Item activation_\n\nThe `<tree-view>` element fires an `treeViewNodeActivated` event whenever a node is activated (eg. clicked)\nvia the mouse or keyboard.\n\nThe `treeViewBeforeNodeActivated` event fires before a node is activated. Canceling this event will prevent the\nnode from being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"treeViewBeforeNodeActivated\",\n  (event: CustomEvent<TreeViewNodeInfo>) => {\n    event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n  }\n)\n```\n\n_Item checking/unchecking_\n\nThe `tree-view` element fires a `treeViewNodeChecked` event whenever a node is checked or unchecked.\n\nThe `treeViewBeforeNodeChecked` event fires before a node is checked or unchecked. Canceling this event will\nprevent the check/uncheck operation.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n  \"treeViewBeforeNodeChecked\",\n  (event: CustomEvent<TreeViewNodeInfo[]>) => {\n    event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n  }\n)\n```\n\nBecause checking or unchecking a sub-tree results in the checking or unchecking of all its children recursively,\nboth the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`\nobjects, which contain entries for every modified node in the tree.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "TreeView",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "TreeView",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/default/",
    "parameters": [
      {
        "name": "node_variant",
        "type": "Symbol",
        "default": "`:div`",
        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
      },
      {
        "name": "form_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "These arguments allow the selections made within a `TreeView` to be submitted to the server as part of a Rails form. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}."
      }
    ],
    "slots": [
      {
        "name": "nodes",
        "description": null,
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "with_leaf",
        "description": "Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "N/A",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_sub_tree",
        "description": "Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "N/A",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "node_variant",
        "description": "Returns the value of attribute node_variant.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/alpha/tree_view/default",
        "name": "default",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/empty",
        "name": "empty",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/loading_failure",
        "name": "loading_failure",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/loading_spinner",
        "name": "loading_spinner",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/loading_skeleton",
        "name": "loading_skeleton",
        "snapshot": "interactive",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/async_alpha",
        "name": "async_alpha",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/leaf_node_playground",
        "name": "leaf_node_playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/links",
        "name": "links",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/buttons",
        "name": "buttons",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/auto_expansion",
        "name": "auto_expansion",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/tree_view/form_input",
        "name": "form_input",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::Visual",
        "description": "A `TreeView` visual, either leading or trailing.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::Visual",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewVisual",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/visual.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/visual/default/",
        "parameters": [
          {
            "name": "id",
            "type": "String",
            "default": "N/A",
            "description": "This visual's HTML ID."
          },
          {
            "name": "visual",
            "type": "ViewComponent::Base",
            "default": "N/A",
            "description": "A renderable component like an instance of {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}} to render as the visual."
          },
          {
            "name": "label",
            "type": "String",
            "default": "`nil`",
            "description": "Text describing this visual that will be visible only to screen readers."
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::SubTreeContainer",
        "description": "This component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::SubTreeContainer",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewSubTreeContainer",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree_container.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree_container/default/",
        "parameters": [
          {
            "name": "path",
            "type": "Array<String>",
            "default": "N/A",
            "description": "The path to this node."
          },
          {
            "name": "expanded",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not this sub-tree node renders expanded."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [
          {
            "name": "path",
            "description": "The path to this node",
            "parameters": [],
            "return_types": [
              "Array<String>"
            ]
          },
          {
            "name": "expanded",
            "description": "Whether or not this sub-tree node renders expanded.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "expanded?",
            "description": "Whether or not this sub-tree node renders expanded.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::SubTree",
        "description": "A `TreeView` sub-tree.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::SubTree",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewSubTree",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree/default/",
        "parameters": [
          {
            "name": "node_variant",
            "type": "Symbol",
            "default": "N/A",
            "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "nodes",
            "description": null,
            "parameters": []
          },
          {
            "name": "loader",
            "description": null,
            "parameters": []
          },
          {
            "name": "no_items_message",
            "description": "The message to display if this sub-tree contains no children.",
            "parameters": []
          }
        ],
        "methods": [
          {
            "name": "with_leaf",
            "description": "Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}"
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::LeafNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_sub_tree",
            "description": "Adds a sub-tree node to the tree. Sub-trees are nodes that have children, which can be both leaf nodes and other sub-trees.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}"
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::TreeView::SubTreeNode{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_loading_spinner",
            "description": "Adds a loader to this sub-tree that displays a skeleton animation while nodes are fetched from the server.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SkeletonLoader{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "node_variant",
            "description": "Returns the value of attribute node_variant.",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::SpinnerLoader",
        "description": "Renders a loading spinner for a `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::SpinnerLoader",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewSpinnerLoader",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/spinner_loader.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/spinner_loader/default/",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The URL to fetch nodes from."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "loading_failure_message",
            "description": "The failure message that appears if loading nodes from the server fails.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::LoadingFailureMessage{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::SkeletonLoader",
        "description": "Renders a loading skeleton for a `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::SkeletonLoader",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewSkeletonLoader",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/skeleton_loader.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/skeleton_loader/default/",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The URL to fetch nodes from."
          },
          {
            "name": "count",
            "type": "Integer",
            "default": "`3`",
            "description": "The number of skeleton nodes to render."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::SubTreeContainer{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "loading_failure_message",
            "description": "The failure message that appears if loading nodes from the server fails.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::LoadingFailureMessage{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::Node",
        "description": "A generic `TreeView` node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::Node",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewNode",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/node.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/node/default/",
        "parameters": [
          {
            "name": "path",
            "type": "Array<String>",
            "default": "N/A",
            "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
          },
          {
            "name": "node_variant",
            "type": "Symbol",
            "default": "N/A",
            "description": "The node variant to use for the node's content, i.e. the `:button` or `:div`. One of `:anchor`, `:button`, or `:div`."
          },
          {
            "name": "href",
            "type": "String",
            "default": "`nil`",
            "description": "The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`."
          },
          {
            "name": "current",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not this node is the current node. The current node is styled differently than regular nodes and is the first element that receives focus when tabbing to the `TreeView` component."
          },
          {
            "name": "select_variant",
            "type": "Symbol",
            "default": "`:none`",
            "description": "Controls the type of checkbox that appears. One of `:multiple` or `:none`."
          },
          {
            "name": "checked",
            "type": "Boolean | String",
            "default": "`false`",
            "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
          },
          {
            "name": "disabled",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not the node can be activated. Passing `false` here will cause the node to appear visually disabled but it is still keyboard-focusable."
          },
          {
            "name": "value",
            "type": "String",
            "default": "`nil`",
            "description": "If this node is checked, this value will be sent to the server on form submission."
          },
          {
            "name": "content_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Arguments attached to the node's content, i.e the `<button>` or `<a>` element. {{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "leading_action",
            "description": "Generic leading action slot",
            "parameters": []
          },
          {
            "name": "leading_visual",
            "description": "Generic leading visual slot",
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": "Generic trailing visual slot",
            "parameters": []
          },
          {
            "name": "toggle",
            "description": "Generic toggle button slot",
            "parameters": []
          },
          {
            "name": "text_content",
            "description": "Generic text content slot (for node's label)",
            "parameters": []
          }
        ],
        "methods": [
          {
            "name": "current",
            "description": "Wether or not this node is the current node.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "current?",
            "description": "Wether or not this node is the current node.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "checked",
            "description": "This node's checked state.",
            "parameters": [],
            "return_types": [
              "String"
            ]
          },
          {
            "name": "select_variant",
            "description": "This node's select variant (i.e. check box variant).",
            "parameters": [],
            "return_types": [
              "Symbol"
            ]
          },
          {
            "name": "node_variant",
            "description": "This node's variant, eg. `:button`, `:div`, etc.",
            "parameters": [],
            "return_types": [
              "Symbol"
            ]
          },
          {
            "name": "disabled",
            "description": "Whether or not this node is disabled, i.e. cannot be activated.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "disabled?",
            "description": "Whether or not this node is disabled, i.e. cannot be activated.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "level",
            "description": "The numeric depth of this node.",
            "parameters": [],
            "return_types": [
              "Integer"
            ]
          },
          {
            "name": "merge_system_arguments!",
            "description": "Merges the given arguments into the current hash of system arguments provided when the component was\ninitially constructed. This method can be used to add additional arguments just before rendering.",
            "parameters": [
              {
                "name": "other_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The other hash of system arguments to merge into the current one."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::LoadingFailureMessage",
        "description": "A `TreeView` loading failure message.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::LoadingFailureMessage",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewLoadingFailureMessage",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/loading_failure_message.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/loading_failure_message/default/",
        "parameters": [
          {
            "name": "text",
            "type": "String",
            "default": "`Something went wrong`",
            "description": "The failure message to display."
          },
          {
            "name": "retry_button_label",
            "type": "String",
            "default": "`Retry`",
            "description": "The text shown on the retry button."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::LeadingAction",
        "description": "The leading action for `TreeView` nodes.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::LeadingAction",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewLeadingAction",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/leading_action.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/leading_action/default/",
        "parameters": [
          {
            "name": "action",
            "type": "ViewComponent::Base",
            "default": "N/A",
            "description": "A component or other renderable to use as the action button etc."
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::IconPair",
        "description": "A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is\nexpanded and collapsed.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::IconPair",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewIconPair",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/icon_pair.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/icon_pair/default/",
        "parameters": [
          {
            "name": "expanded",
            "type": "Boolean",
            "default": "`false`",
            "description": "If true, the expanded icon is shown and the collapsed icon is hidden, etc."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "expanded_icon",
            "description": "The expanded icon.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "collapsed_icon",
            "description": "The collapsed icon.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "expanded",
            "description": "Whether or not this icon is expanded.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "expanded?",
            "description": "Whether or not this icon is expanded.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::Icon",
        "description": "An icon for a `TreeView` node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::Icon",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewIcon",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/icon.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/icon/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::LeafNode",
        "description": "A `TreeView` leaf node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::LeafNode",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewLeafNode",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/leaf_node.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/leaf_node/default/",
        "parameters": [
          {
            "name": "label",
            "type": "String",
            "default": "N/A",
            "description": "The node's label, i.e. it's textual content."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Node{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "leading_visual",
            "description": null,
            "parameters": []
          },
          {
            "name": "leading_action",
            "description": null,
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": null,
            "parameters": []
          }
        ],
        "methods": [
          {
            "name": "with_leading_visual_icon",
            "description": "Adds a leading visual icon rendered to the left of the node's label.",
            "parameters": [
              {
                "name": "label",
                "type": "String",
                "default": "`nil`",
                "description": "A label describing the visual, displayed only to screen readers."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_leading_action_button",
            "description": "Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_trailing_visual_icon",
            "description": "Adds a trailing visual icon rendered to the right of the node's label.",
            "parameters": [
              {
                "name": "label",
                "type": "String",
                "default": "`nil`",
                "description": "A label describing the visual, displayed only to screen readers."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Alpha::TreeView::SubTreeNode",
        "description": "A `TreeView` sub-tree node.\n\nThis component is part of the {{#link_to_component}}Primer::Alpha::TreeView{{/link_to_component}} component and should\nnot be used directly.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TreeView::SubTreeNode",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TreeViewSubTreeNode",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/sub_tree_node.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/sub_tree_node/default/",
        "parameters": [
          {
            "name": "label",
            "type": "String",
            "default": "N/A",
            "description": "The node's label, i.e. it's textual content."
          },
          {
            "name": "path",
            "type": "Array<String>",
            "default": "N/A",
            "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
          },
          {
            "name": "node_variant",
            "type": "Symbol",
            "default": "N/A",
            "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
          },
          {
            "name": "sub_tree_component_klass",
            "type": "Class",
            "default": "`SubTree`",
            "description": "The class to use for the sub-tree instead of the default {{#link_to_component}}Primer::Alpha::TreeView::SubTree{{/link_to_component}}"
          },
          {
            "name": "expanded",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not this sub-tree should be rendered expanded."
          },
          {
            "name": "select_strategy",
            "type": "Symbol",
            "default": "`:mixed_descendants`",
            "description": "What should happen when this sub-tree node is checked. One of `:descendants`, `:mixed_descendants`, or `:self`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Node{{/link_to_component}}."
          }
        ],
        "slots": [
          {
            "name": "leading_visual",
            "description": null,
            "parameters": []
          },
          {
            "name": "leading_action",
            "description": null,
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": null,
            "parameters": []
          }
        ],
        "methods": [
          {
            "name": "with_leading_visual_icon",
            "description": "Adds a leading visual icon rendered to the left of the node's label.",
            "parameters": [
              {
                "name": "label",
                "type": "String",
                "default": "`nil`",
                "description": "A label describing the visual, displayed only to screen readers."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_leading_visual_icons",
            "description": "Adds a pair of leading visual icon rendered to the left of the node's label.",
            "parameters": [
              {
                "name": "label",
                "type": "String",
                "default": "`nil`",
                "description": "A label describing the visual, displayed only to screen readers."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::IconPair{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_leading_action_button",
            "description": "Adds a leading action rendered to the left of the node's label and any leading visuals or checkboxes.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
              }
            ],
            "return_types": []
          },
          {
            "name": "with_trailing_visual_icon",
            "description": "Adds a trailing visual icon rendered to the right of the node's label.",
            "parameters": [
              {
                "name": "label",
                "type": "String",
                "default": "`nil`",
                "description": "A label describing the visual, displayed only to screen readers."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::TreeView::Icon{{/link_to_component}}."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Alpha::UnderlineNav",
    "description": "Use `UnderlineNav` to style navigation links with a minimal\nunderlined selected state, typically placed at the top\nof the page.\n\nFor panel navigation, use {{#link_to_component}}Primer::Alpha::UnderlinePanels{{/link_to_component}} instead.",
    "accessibility_docs": "- By default, `UnderlineNav` renders links within a `<nav>` element. `<nav>` has an\n  implicit landmark role of `navigation` which should be reserved for main links.\n  For all other set of links, set tag to `:div`.\n- See {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}} for additional\n  accessibility considerations.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "UnderlineNav",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "UnderlineNav",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:nav`",
        "description": "One of `:div` or `:nav`."
      },
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
      },
      {
        "name": "align",
        "type": "Symbol",
        "default": "`:left`",
        "description": "One of `:left` or `:right`. - Defaults to left"
      },
      {
        "name": "body_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "tabs",
        "description": "Use the tabs to list page links.",
        "parameters": [
          {
            "name": "selected",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether the tab is selected."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "actions",
        "description": "Use actions for a call to action.",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "`:div`",
            "description": "One of `:div` or `:span`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/underline_nav/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/underline_nav/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/underline_nav/with_icons_and_counters",
        "name": "with_icons_and_counters",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Alpha::UnderlinePanels",
    "description": "Use `UnderlinePanels` to style tabs with an associated panel and an underlined selected state.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "UnderlinePanels",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "UnderlinePanels",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/",
    "parameters": [
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
      },
      {
        "name": "align",
        "type": "Symbol",
        "default": "`:left`",
        "description": "One of `:left` or `:right`. - Defaults to left"
      },
      {
        "name": "body_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the body wrapper."
      },
      {
        "name": "wrapper_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} for the `TabContainer` wrapper."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "tabs",
        "description": "Use to render a button and an associated panel slot. See the example below or refer to {{#link_to_component}}Primer::Alpha::Navigation::Tab{{/link_to_component}}.",
        "parameters": [
          {
            "name": "id",
            "type": "String",
            "default": "N/A",
            "description": "Unique ID of tab."
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether the tab is selected."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "actions",
        "description": "Use actions for a call to action.",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "`:div`",
            "description": "One of `:div` or `:span`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/alpha/underline_panels/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/underline_panels/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
        "name": "with_icons_and_counters",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/alpha/underline_panels/with_actions",
        "name": "with_actions",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::AutoComplete",
    "description": "Use `AutoComplete` to provide a user with a list of selectable suggestions that appear when they type into the\ninput field. This list is populated by server search results.",
    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\n* `label_text` is required and visible by default.\n* If you must hide the label, set `visually_hide_label` to `true`.\nHowever, please note that a visible label should almost always\nbe used unless there is compelling reason not to. A placeholder is not a label.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "AutoComplete",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "AutoComplete",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/default/",
    "parameters": [
      {
        "name": "label_text",
        "type": "String",
        "default": "N/A",
        "description": "The label of the input."
      },
      {
        "name": "src",
        "type": "String",
        "default": "N/A",
        "description": "The route to query."
      },
      {
        "name": "input_id",
        "type": "String",
        "default": "N/A",
        "description": "Id of the input element."
      },
      {
        "name": "input_name",
        "type": "String",
        "default": "`nil`",
        "description": "Optional name of the input element, defaults to `input_id` when not set."
      },
      {
        "name": "list_id",
        "type": "String",
        "default": "N/A",
        "description": "Id of the list element."
      },
      {
        "name": "visually_hide_label",
        "type": "Boolean",
        "default": "`false`",
        "description": "Controls if the label is visible. If `true`, screen reader only text will be added."
      },
      {
        "name": "show_clear_button",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds optional clear button."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      },
      {
        "name": "size",
        "type": "Hash",
        "default": "`:medium`",
        "description": "Input size can be small, medium (default), or large"
      },
      {
        "name": "full_width",
        "type": "Boolean",
        "default": "`false`",
        "description": "Input can be full-width or fit to content"
      },
      {
        "name": "width",
        "type": "String",
        "default": "`:auto`",
        "description": "Optional parameter to set max width of results list. One of `:auto`, `:large`, `:medium`, `:small`, `:xlarge`, or `:xxlarge`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Disabled input"
      },
      {
        "name": "invalid",
        "type": "Boolean",
        "default": "`false`",
        "description": "Invalid input"
      },
      {
        "name": "placeholder",
        "type": "String",
        "default": "`nil`",
        "description": "The placeholder text displayed within the input"
      },
      {
        "name": "inset",
        "type": "Boolean",
        "default": "`false`",
        "description": "subtle input background color"
      },
      {
        "name": "monospace",
        "type": "Boolean",
        "default": "`false`",
        "description": "monospace input font family"
      }
    ],
    "slots": [
      {
        "name": "results",
        "description": "Customizable results list.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "leading_visual",
        "description": "Leading visual.\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "input",
        "description": "Customizable input used to search for results.\nIt is preferred to use this slot sparingly - it will be created by default if not explicity added.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/auto_complete/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/with_submit_button",
        "name": "with_submit_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/leading_visual",
        "name": "leading_visual",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/trailing_action",
        "name": "trailing_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/visually_hide_label",
        "name": "visually_hide_label",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/small",
        "name": "small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/medium",
        "name": "medium",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/large",
        "name": "large",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/leading_visual_in_results",
        "name": "leading_visual_in_results",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/trailing_visual_in_results",
        "name": "trailing_visual_in_results",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/with_non_visible_label",
        "name": "with_non_visible_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/with_icon",
        "name": "with_icon",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/show_clear_button",
        "name": "show_clear_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/size_small",
        "name": "size_small",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/monospace",
        "name": "monospace",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/inset",
        "name": "inset",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/auto_complete/no_results",
        "name": "no_results",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::AutoComplete::NoResultItem",
        "description": "Use `NoResultItem` to display a message when no autocomplete results are found.\nRenders as a simple div inside the overlay, not as a list item.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "AutoComplete::NoResultItem",
        "status": "beta",
        "a11y_reviewed": false,
        "short_name": "AutoCompleteNoResultItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/no_result_item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/no_result_item/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Beta::AutoComplete::Item",
        "description": "Use `AutoCompleteItem` to list results of an auto-completed search.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "AutoComplete::Item",
        "status": "beta",
        "a11y_reviewed": false,
        "short_name": "AutoCompleteItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/item/default/",
        "parameters": [
          {
            "name": "value",
            "type": "String",
            "default": "N/A",
            "description": "Value of the item."
          },
          {
            "name": "selected",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether the item is selected."
          },
          {
            "name": "disabled",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether the item is disabled."
          },
          {
            "name": "description_variant",
            "type": "Hash",
            "default": "`:block`",
            "description": "Changes the description style. Allowed values are :inline, :block"
          },
          {
            "name": "description",
            "type": "String",
            "default": "N/A",
            "description": "Display description text below label"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "leading_visual",
            "description": "The leading visual rendered before the link.",
            "parameters": [
              {
                "name": "kwargs",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}"
              }
            ]
          },
          {
            "name": "trailing_visual",
            "description": "The trailing visual rendered after the link.",
            "parameters": [
              {
                "name": "kwargs",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}"
              }
            ]
          },
          {
            "name": "description",
            "description": "Optional description",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          }
        ],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::Avatar",
    "description": "`Avatar` can be used to represent users and organizations on GitHub.\n\n- Use the default circle avatar for users, and the square shape\nfor organizations or any other non-human avatars.\n- By default, `Avatar` will render a static `<img>`. To have `Avatar` function as a link, set the `href` which will wrap the `<img>` in a `<a>`.\n- Set `size` to update the height and width of the `Avatar` in pixels.\n- To stack multiple avatars together, use {{#link_to_component}}Primer::Beta::AvatarStack{{/link_to_component}}.",
    "accessibility_docs": "Images should have text alternatives that describe the information or function represented.\nIf the avatar functions as a link, provide alt text that helps convey the function. For instance,\nif `Avatar` is a link to a user profile, the alt attribute should be `@kittenuser profile`\nrather than `@kittenuser`.\n[Learn more about best image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/)",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Avatar",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Avatar",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/default/",
    "parameters": [
      {
        "name": "src",
        "type": "String",
        "default": "N/A",
        "description": "The source url of the avatar image."
      },
      {
        "name": "alt",
        "type": "String",
        "default": "`nil`",
        "description": "Passed through to alt on img tag."
      },
      {
        "name": "size",
        "type": "Integer",
        "default": "`20`",
        "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, `64`, or `80`."
      },
      {
        "name": "shape",
        "type": "Symbol",
        "default": "`:circle`",
        "description": "Shape of the avatar. One of `:circle` or `:square`."
      },
      {
        "name": "href",
        "type": "String",
        "default": "`nil`",
        "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
      },
      {
        "name": "tooltip",
        "type": "String",
        "default": "`nil`",
        "description": "Tooltip text to display on hover when href is provided."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/avatar/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/as_link",
        "name": "as_link",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_16",
        "name": "size_16",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_20",
        "name": "size_20",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_24",
        "name": "size_24",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_32",
        "name": "size_32",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_40",
        "name": "size_40",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_48",
        "name": "size_48",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_64",
        "name": "size_64",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/size_80",
        "name": "size_80",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/shape_circle",
        "name": "shape_circle",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar/shape_square",
        "name": "shape_square",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::AvatarStack",
    "description": "Use `AvatarStack` to stack multiple avatars together.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "AvatarStack",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "AvatarStack",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar_stack/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "One of `:div` or `:span`."
      },
      {
        "name": "align",
        "type": "Symbol",
        "default": "`:left`",
        "description": "One of `:left` or `:right`."
      },
      {
        "name": "tooltipped",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to add a tooltip to the stack or not."
      },
      {
        "name": "disable_expand",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to disable the expand behavior on hover. If true, avatars will not expand."
      },
      {
        "name": "body_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "Parameters to add to the Body. If `tooltipped` is set, has the same arguments as {{#link_to_component}}Primer::Tooltip{{/link_to_component}}. The default tag is `:div` but can be changed using `tag:` to one of `:div` or `:span`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "avatars",
        "description": "Required list of stacked avatars.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/avatar_stack/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/avatar_1",
        "name": "avatar_1",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/avatar_2",
        "name": "avatar_2",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/avatar_3",
        "name": "avatar_3",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/avatar_4",
        "name": "avatar_4",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/avatar_5",
        "name": "avatar_5",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/align_right",
        "name": "align_right",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/with_tooltip",
        "name": "with_tooltip",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/with_individual_tooltips",
        "name": "with_individual_tooltips",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/avatar_stack/with_disabled_expand",
        "name": "with_disabled_expand",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::BaseButton",
    "description": "Use `BaseButton` to render an unstyled `<button>` tag that can be customized.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "BaseButton",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "BaseButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/base_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/base_button/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "block",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether button is full-width with `display: block`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
      },
      {
        "name": "inactive",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [
      {
        "name": "disabled",
        "description": "Returns the value of attribute disabled.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "disabled?",
        "description": "Returns the value of attribute disabled.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/beta/base_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/base_button/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/base_button/disabled",
        "name": "disabled",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Blankslate",
    "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
    "accessibility_docs": "- The blankslate uses a semantic heading that must be set at the appropriate level based on the hierarchy of the page.\n- All blankslate visuals have been programmed as decorative images, using `aria-hidden=”true”` and `img alt=””`,  which will hide the visual from screen reader users.\n- The blankslate supports a primary and secondary action. Both actions have been built as semantic links with primary and secondary styling.\n- `secondary_action` text should be meaningful out of context and clearly describe the destination. Avoid using vague text like, \"Learn more\" or \"Click here\".\n- The blankslate can leverage the spinner component, which will communicate to screen reader users that the content is still loading.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Blankslate",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Blankslate",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/default/",
    "parameters": [
      {
        "name": "narrow",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds a maximum width of `485px` to the Blankslate."
      },
      {
        "name": "spacious",
        "type": "Boolean",
        "default": "`false`",
        "description": "Increases the padding from `32px` to `80px 40px`."
      },
      {
        "name": "border",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds a border around the Blankslate."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "visual",
        "description": "Optional visual.\n\nUse:\n\n- `visual_icon` for an {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n- `visual_image` for an {{#link_to_component}}Primer::Alpha::Image{{/link_to_component}}.\n- `visual_spinner` for a {{#link_to_component}}Primer::Beta::Spinner{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "heading",
        "description": "Required heading.",
        "parameters": [
          {
            "name": "tag",
            "type": "String",
            "default": "N/A",
            "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "description",
        "description": "Optional description.\n\n- The description should always be informative and actionable.\n- Don't use phrases like \"You can\".",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "primary_action",
        "description": "Optional primary action\n\nThe `primary_action` slot renders an anchor link which is visually styled as a button to provide more emphasis to the\nBlankslate's primary action.",
        "parameters": [
          {
            "name": "href",
            "type": "String",
            "default": "N/A",
            "description": "URL to be used for the primary action."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "secondary_action",
        "description": "Optional secondary action\n\nThe `secondary_action` slot renders a normal anchor link, which can be used to redirect the user to additional information\n(e.g. Help documentation).",
        "parameters": [
          {
            "name": "href",
            "type": "String",
            "default": "N/A",
            "description": "URL to be used for the secondary action."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/blankslate/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/option_narrow",
        "name": "option_narrow",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/option_spacious",
        "name": "option_spacious",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/option_border",
        "name": "option_border",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/with_icon",
        "name": "with_icon",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/with_image",
        "name": "with_image",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/loading",
        "name": "loading",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/description",
        "name": "description",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/primary_action",
        "name": "primary_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/secondary_action",
        "name": "secondary_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/full",
        "name": "full",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/blankslate/inside_flex_container",
        "name": "inside_flex_container",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::BorderBox",
    "description": "`BorderBox` is a Box component with a border.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "BorderBox",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "BorderBox",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/default/",
    "parameters": [
      {
        "name": "padding",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:condensed`, `:default`, or `:spacious`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "header",
        "description": "Optional Header.\n\nWhen using header.with_title, the recommended tag is a heading tag, such as h1, h2, h3, etc.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "body",
        "description": "Optional Body.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "footer",
        "description": "Optional Footer.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "rows",
        "description": "Use Rows to add rows with borders and maintain the same padding.",
        "parameters": [
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "N/A",
            "description": "Color scheme. One of `:default`, `:info`, `:neutral`, or `:warning`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/border_box/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/header_with_title",
        "name": "header_with_title",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/row_colors",
        "name": "row_colors",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/padding_default",
        "name": "padding_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/padding_condensed",
        "name": "padding_condensed",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/border_box/padding_spacious",
        "name": "padding_spacious",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::BorderBox::Header",
        "description": "`BorderBox::Header` is used inside `BorderBox` to render its header slot.",
        "accessibility_docs": "When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. [Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "BorderBox::Header",
        "status": "beta",
        "a11y_reviewed": false,
        "short_name": "BorderBoxHeader",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/header/default/",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "title",
            "description": "Optional Title.",
            "parameters": [
              {
                "name": "tag",
                "type": "Symbol",
                "default": "N/A",
                "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "{{link_to_system_arguments_docs}}"
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "id",
            "description": "Returns the value of attribute id.",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::Breadcrumbs",
    "description": "Use `Breadcrumbs` to display page hierarchy.\n\n#### Known issues\n\n##### Responsiveness\n\n`Breadcrumbs` is not optimized for responsive designs.",
    "accessibility_docs": "`Breadcrumbs` renders a list of links within a `nav` element and has an implicit landmark role of `navigation`.\nBy default, the component labels the `nav` element with \"Breadcrumbs\" which helps distinguish the type of navigation.\nAdditionally, the component will always render the last link, which should represent the current page, with an `aria-current=\"page\"` attribute.\n\nFor more information on the breadcrumbs pattern implemented by this component, see [WAI-ARIA 1.1 Breadcrumb](https://www.w3.org/TR/wai-aria-practices-1.1/#breadcrumb).",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Breadcrumbs",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Breadcrumbs",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "items",
        "description": null,
        "parameters": [
          {
            "name": "href",
            "type": "String",
            "default": "N/A",
            "description": "The URL to link to."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/breadcrumbs/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/breadcrumbs/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/breadcrumbs/with_beta_truncate",
        "name": "with_beta_truncate",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/breadcrumbs/with_deprecated_truncate",
        "name": "with_deprecated_truncate",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/breadcrumbs/with_link_target",
        "name": "with_link_target",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/breadcrumbs/with_long_items",
        "name": "with_long_items",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::Breadcrumbs::Item",
        "description": "This component is part of `Primer::Beta::Breadcrumbs` and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Breadcrumbs::Item",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "BreadcrumbsItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/item/default/",
        "parameters": [],
        "slots": [],
        "methods": [
          {
            "name": "selected",
            "description": "Returns the value of attribute selected.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "selected=",
            "description": "Sets the attribute selected",
            "parameters": [
              {
                "name": "value",
                "type": "",
                "default": "N/A",
                "description": "the value to set the attribute selected to."
              }
            ],
            "return_types": []
          },
          {
            "name": "href",
            "description": "Returns the value of attribute href.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "href=",
            "description": "Sets the attribute href",
            "parameters": [
              {
                "name": "value",
                "type": "",
                "default": "N/A",
                "description": "the value to set the attribute href to."
              }
            ],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::Button",
    "description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
    "accessibility_docs": "Additional markup is required if setting the `tag` argument to either `:a` or `:summary`.\n\n* `:a` requires you to pass in an `href` attribute\n* `:summary` requires you to wrap the component in a `<details>` element",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Button",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Button",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
    "parameters": [
      {
        "name": "base_button_class",
        "type": "Class",
        "default": "`Primer::Beta::BaseButton`",
        "description": "The button class to render."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "block",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether button is full-width with `display: block`."
      },
      {
        "name": "align_content",
        "type": "Symbol",
        "default": "`:center`",
        "description": "One of `:center` or `:start`."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "inactive",
        "type": "Boolean",
        "default": "N/A",
        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
      },
      {
        "name": "label_wrap",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button label text wraps and the button height expands."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "leading_visual",
        "description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\n- `leading_visual_svg` to render a SVG.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_visual",
        "description": "Trailing visuals appear to the right of the button text.\n\nUse:\n\n- `trailing_visual_counter` for a {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_action",
        "description": "Trailing action appears to the right of the trailing visual.\n\nUse:\n\n- `trailing_action_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "tooltip",
        "description": "`Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nConsult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
        "parameters": [
          {
            "name": "type",
            "type": "Symbol",
            "default": "`:description`",
            "description": "One of `:description` or `:label`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/primary",
        "name": "primary",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/danger",
        "name": "danger",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/invisible",
        "name": "invisible",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/invisible_all_visuals",
        "name": "invisible_all_visuals",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/link",
        "name": "link",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/all_schemes",
        "name": "all_schemes",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/full_width",
        "name": "full_width",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/label_wrap",
        "name": "label_wrap",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/link_as_button",
        "name": "link_as_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/summary_as_button",
        "name": "summary_as_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/trailing_visual",
        "name": "trailing_visual",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/leading_visual",
        "name": "leading_visual",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/leading_visual_svg",
        "name": "leading_visual_svg",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/trailing_action",
        "name": "trailing_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/trailing_counter",
        "name": "trailing_counter",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/with_tooltip",
        "name": "with_tooltip",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/inactive",
        "name": "inactive",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/link_scheme_label_wrap",
        "name": "link_scheme_label_wrap",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button/small_scheme_one_character",
        "name": "small_scheme_one_character",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::ButtonGroup",
    "description": "Use `ButtonGroup` to render a series of buttons.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ButtonGroup",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "ButtonGroup",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/default/",
    "parameters": [
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "DEPRECATED. One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "buttons",
        "description": "List of buttons to be rendered. Add buttons via the `#with_button`, `#with_menu_button`, and `#with_clipboard_copy_button` methods (see below).",
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "with_button",
        "description": "Adds a button.",
        "parameters": [
          {
            "name": "icon",
            "type": "Symbol",
            "default": "`nil`",
            "description": "If included, adds a {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} with the given {{link_to_octicons}}. Otherwise, a {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} is added instead."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_menu_button",
        "description": "Adds a button that activates a menu when clicked.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_clipboard_copy_button",
        "description": "Adds a {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}."
          }
        ],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/beta/button_group/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/split_button",
        "name": "split_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/with_menu_button",
        "name": "with_menu_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/icon_buttons",
        "name": "icon_buttons",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/multiple_tags",
        "name": "multiple_tags",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/button_group/with_clipboard_copy_button",
        "name": "with_clipboard_copy_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::ButtonGroup::MenuButton",
        "description": "Renders a button in a {{#link_to_component}}Primer::Beta::ButtonGroup{{/link_to_component}} that displays an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} when clicked.\nThis component should not be used outside of a `ButtonGroup` context.\n\nThis component yields both the button and the list to the block when rendered.\n\n```erb\n<%= render(Primer::Beta::ButtonGroup.new) do |group| %>\n  <% group.with_menu_button do |menu, button| %>\n    <% menu.with_item(label: \"Item 1\") %>\n    <% button.with_trailing_visual_icon(icon: \"triangle-down\") %>\n  <% end %>\n<% end %>\n```",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "ButtonGroup::MenuButton",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "ButtonGroupMenuButton",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group/menu_button.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/menu_button/default/",
        "parameters": [
          {
            "name": "menu_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}}."
          },
          {
            "name": "button_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::ClipboardCopy",
    "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.\n\nThis component by itself is not styled as a button, and can therefore only be used in limited circumstances.\nIf you're looking for a button, consider using {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}\ninstead.",
    "accessibility_docs": "Always set an accessible label to help the user interact with the component.\n\nThis component has a built-in `aria-live` region that announces \"Copied!\" when the copy element is pressed.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "ClipboardCopy",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "ClipboardCopy",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy/default/",
    "parameters": [
      {
        "name": "aria-label",
        "type": "String",
        "default": "N/A",
        "description": "String that will be read to screenreaders when the component is focused"
      },
      {
        "name": "value",
        "type": "String",
        "default": "`nil`",
        "description": "Text to copy into the users clipboard when they click the component."
      },
      {
        "name": "for",
        "type": "String",
        "default": "N/A",
        "description": "Element id from where to get the copied value."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/clipboard_copy/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/clipboard_copy/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/clipboard_copy/text",
        "name": "text",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/clipboard_copy/element",
        "name": "element",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::ClipboardCopyBaseButton",
    "description": "Internal\n\n:nodoc:",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ClipboardCopyBaseButton",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "ClipboardCopyBaseButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_base_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_base_button/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "block",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether button is full-width with `display: block`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
      },
      {
        "name": "inactive",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the button looks visually disabled, but can still accept all the same interactions as an enabled button."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::ClipboardCopyButton",
    "description": "`ClipboardCopyButton` uses the `ClipboardCopy` component to copy text to the clipboard,\nstyled as a Primer button. It can be used wherever a button is desired, and works well\nwith components like `ButtonGroup`.",
    "accessibility_docs": "This component has a built-in `aria-live` region that announces \"Copied!\" when the copy button is pressed.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ClipboardCopyButton",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "ClipboardCopyButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy_button/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} and {{#link_to_component}}Primer::Beta::ClipboardCopy{{/link_to_component}}."
      }
    ],
    "slots": [
      {
        "name": "leading_visual",
        "description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\n- `leading_visual_svg` to render a SVG.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_visual",
        "description": "Trailing visuals appear to the right of the button text.\n\nUse:\n\n- `trailing_visual_counter` for a {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_action",
        "description": "Trailing action appears to the right of the trailing visual.\n\nUse:\n\n- `trailing_action_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "tooltip",
        "description": "`Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nConsult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
        "parameters": [
          {
            "name": "type",
            "type": "Symbol",
            "default": "`:description`",
            "description": "One of `:description` or `:label`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/clipboard_copy_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/clipboard_copy_button/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/clipboard_copy_button/with_tooltip",
        "name": "with_tooltip",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::CloseButton",
    "description": "Use `CloseButton` to render an `×` without default button styles.\n\n[0]: https://primer.style/view-components/system-arguments#html-attributes",
    "accessibility_docs": "`CloseButton` has a default `aria-label` of \"Close\" to provides assistive technologies with an accessible label.\nYou may choose to override this label with something more descriptive via [system_arguments][0].",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "CloseButton",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "CloseButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/close_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/close_button/default/",
    "parameters": [
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button` or `:submit`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/close_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/close_button/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Counter",
    "description": "Use `Counter` to add a count to navigational elements and buttons.",
    "accessibility_docs": "Always use `Counter` with adjacent text that provides supplementary information regarding what the count is for. For instance, `Counter`\nshould be accompanied with text such as `issues` or `pull requests`.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Counter",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Counter",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/counter.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/counter/default/",
    "parameters": [
      {
        "name": "count",
        "type": "Integer, Float::INFINITY, nil",
        "default": "`0`",
        "description": "The number to be displayed (e.x. # of issues, pull requests)"
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "Color scheme. One of `:default`, `:primary`, or `:secondary`."
      },
      {
        "name": "limit",
        "type": "Integer, nil",
        "default": "`5_000`",
        "description": "Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display \"5,000+\")"
      },
      {
        "name": "hide_if_zero",
        "type": "Boolean",
        "default": "`false`",
        "description": "If true, a `hidden` attribute is added to the counter if `count` is zero."
      },
      {
        "name": "text",
        "type": "String",
        "default": "`\"\"`",
        "description": "Text to display instead of count."
      },
      {
        "name": "round",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to apply our standard rounding logic to value."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/counter/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/with_text",
        "name": "with_text",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/color_scheme_default",
        "name": "color_scheme_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/color_scheme_primary",
        "name": "color_scheme_primary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/color_scheme_secondary",
        "name": "color_scheme_secondary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_default",
        "name": "rounding_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_above_1000",
        "name": "rounding_above_1000",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_below_1000",
        "name": "rounding_below_1000",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_large_number",
        "name": "rounding_large_number",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_large_number_less_than_custom_limit",
        "name": "rounding_large_number_less_than_custom_limit",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/counter/rounding_large_number_greater_than_custom_limit",
        "name": "rounding_large_number_greater_than_custom_limit",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Details",
    "description": "Use `DetailsComponent` to reveal content after clicking a button.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Details",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Details",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/details/default/",
    "parameters": [
      {
        "name": "overlay",
        "type": "Symbol",
        "default": "`:none`",
        "description": "Dictates the type of overlay to render with. One of `:dark`, `:default`, or `:none`."
      },
      {
        "name": "reset",
        "type": "Boolean",
        "default": "`false`",
        "description": "Defaults to false. If set to true, it will remove the default caret and remove style from the summary element"
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to disable the summary button."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "summary",
        "description": "Use the Summary slot as the target for toggling the Details content open/closed.",
        "parameters": [
          {
            "name": "button",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether or not to render the summary element as a button."
          },
          {
            "name": "aria_label_open",
            "type": "String",
            "default": "N/A",
            "description": "Defaults to \"Collapse\". Value to announce when details element is open."
          },
          {
            "name": "aria_label_closed",
            "type": "String",
            "default": "N/A",
            "description": "Defaults to \"Expand\". Value to announce when details element is closed."
          }
        ]
      },
      {
        "name": "body",
        "description": "Use the Body slot as the main content to be shown when triggered by the Summary.",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "`:div`",
            "description": "One of `:details-dialog`, `:details-menu`, `:div`, or `:ul`."
          },
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{link_to_system_arguments_docs}}."
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "disabled",
        "description": "Returns the value of attribute disabled.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "disabled?",
        "description": "Returns the value of attribute disabled.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "open",
        "description": "Returns the value of attribute open.",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "open?",
        "description": "Returns the value of attribute open.",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [
      {
        "preview_path": "primer/beta/details/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/details/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/details/custom_button",
        "name": "custom_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/details/without_button",
        "name": "without_button",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/details/open",
        "name": "open",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/details/with_aria_labels",
        "name": "with_aria_labels",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Flash",
    "description": "This component has been deprecated. Use [Banner]({{#link_to_component}}Primer::Alpha::Banner{{/link_to_component}}) instead.\n\nUse `Flash` to inform users of successful or pending actions.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Flash",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Flash",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/flash/default/",
    "parameters": [
      {
        "name": "full",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the component should take up the full width of the screen."
      },
      {
        "name": "spacious",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to add margin to the bottom of the component."
      },
      {
        "name": "dismissible",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the component can be dismissed with an X button."
      },
      {
        "name": "icon",
        "type": "Symbol",
        "default": "`nil`",
        "description": "Name of Octicon icon to use."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "action",
        "description": "Optional action content showed on the right side of the component.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/flash/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/color_scheme_default",
        "name": "color_scheme_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/color_scheme_warning",
        "name": "color_scheme_warning",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/color_scheme_danger",
        "name": "color_scheme_danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/color_scheme_success",
        "name": "color_scheme_success",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/options_full",
        "name": "options_full",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/options_dismissible",
        "name": "options_dismissible",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/flash/options_with_icon",
        "name": "options_with_icon",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Heading",
    "description": "`Heading` should be used to communicate page organization and hierarchy.\n\n- Set tag to one of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, `:h6` based on what is appropriate for the page context.\n- Use `Heading` as the title of a section or sub section.\n- Do not use `Heading` for styling alone. For simply styling text, consider using {{#link_to_component}}Primer::Beta::Text{{/link_to_component}} with relevant {{link_to_typography_docs}}\n  such as `font_size` and `font_weight`.\n- Do not jump heading levels. For instance, do not follow a `<h1>` with an `<h3>`. Heading levels should increase by one in ascending order.",
    "accessibility_docs": "While sighted users rely on visual cues such as font size changes to determine what the heading is, assistive technology users rely on programatic cues that can be read out.\nWhen text on a page is visually implied to be a heading, ensure that it is coded as a heading. Additionally, visually implied heading level and coded heading level should be\nconsistent. [See WCAG success criteria: 1.3.1: Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html)\n\nHeadings allow assistive technology users to quickly navigate around a page. Navigation to text that is not meant to be a heading can be a confusing experience.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Heading",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Heading",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/heading.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/heading/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "String",
        "default": "N/A",
        "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/heading/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/heading/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::IconButton",
    "description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
    "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)\n\nAdditional markup is required if setting the `tag` argument to either `:a` or `:summary`.\n\n* `:a` requires you to pass in an `href` attribute\n* `:summary` requires you to wrap the component in a `<details>` element",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "IconButton",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "IconButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/",
    "parameters": [
      {
        "name": "icon",
        "type": "String",
        "default": "N/A",
        "description": "Name of {{link_to_octicons}} to use."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large`, `:medium`, or `:small`."
      },
      {
        "name": "disabled",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not the button is disabled. If true, this option forces `tag:` to `:button`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "aria-label",
        "type": "String",
        "default": "N/A",
        "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
      },
      {
        "name": "aria-description",
        "type": "String",
        "default": "N/A",
        "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
      },
      {
        "name": "show_tooltip",
        "type": "Boolean",
        "default": "`true`",
        "description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
      },
      {
        "name": "tooltip_direction",
        "type": "Symbol",
        "default": "`:s`",
        "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/icon_button/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/invisible",
        "name": "invisible",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/primary",
        "name": "primary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/danger",
        "name": "danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/link_as_button",
        "name": "link_as_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/icon_button/summary_as_button",
        "name": "summary_as_button",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Label",
    "description": "Use `Label` to add contextual metadata to a design.",
    "accessibility_docs": "Use `aria-label` if the `Label` or the context around it don't explain the label.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Label",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Label",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/label.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/label/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:span`",
        "description": "One of `:a`, `:div`, `:span`, or `:summary`."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:large` or `:medium`."
      },
      {
        "name": "inline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to render this label inline."
      },
      {
        "name": "variant",
        "type": "Symbol",
        "default": "`:none`",
        "description": "One of `:inline`, `:large`, or `:none`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/label/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_default",
        "name": "color_scheme_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_primary",
        "name": "color_scheme_primary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_secondary",
        "name": "color_scheme_secondary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_accent",
        "name": "color_scheme_accent",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_success",
        "name": "color_scheme_success",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_attention",
        "name": "color_scheme_attention",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_danger",
        "name": "color_scheme_danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_severe",
        "name": "color_scheme_severe",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_done",
        "name": "color_scheme_done",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/color_scheme_sponsors",
        "name": "color_scheme_sponsors",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/size_default",
        "name": "size_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/size_large",
        "name": "size_large",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/inline_default",
        "name": "inline_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/label/inline_inline",
        "name": "inline_inline",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Link",
    "description": "Use `Link` for navigating from one page to another. `Link` styles anchor tags with default blue styling and hover text-decoration.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Link",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Link",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
    "parameters": [
      {
        "name": "href",
        "type": "String",
        "default": "`nil`",
        "description": "URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:default`, `:primary`, or `:secondary`."
      },
      {
        "name": "muted",
        "type": "Boolean",
        "default": "`false`",
        "description": "Uses light gray for Link color, and blue on hover."
      },
      {
        "name": "underline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to underline the link."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "tooltip",
        "description": "`Tooltip` that appears on mouse hover or keyboard focus over the link. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nThe tooltip will appear adjacent to the anchor element. Both the tooltip and the anchor will be nested\nunder a positioning wrapper.\nConsult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
        "parameters": [
          {
            "name": "type",
            "type": "Symbol",
            "default": "`:description`",
            "description": "One of `:description` or `:label`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "leading_visual",
        "description": "Leading visuals appear to the left of the link text.\n\nUse:\n\n- `leading_visual_icon` which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_visual",
        "description": "Trailing visuals appear to the right of the link text.\n\nUse:\n\n- `trailing_visual_icon` which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/link/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/tooltip",
        "name": "tooltip",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/color_scheme_default",
        "name": "color_scheme_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/color_scheme_primary",
        "name": "color_scheme_primary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/color_scheme_primary_muted",
        "name": "color_scheme_primary_muted",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/color_scheme_secondary",
        "name": "color_scheme_secondary",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/color_scheme_secondary_muted",
        "name": "color_scheme_secondary_muted",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/with_leading_icon",
        "name": "with_leading_icon",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/link/with_trailing_icon",
        "name": "with_trailing_icon",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Markdown",
    "description": "Use `Markdown` to wrap markdown content.",
    "accessibility_docs": "This component is purely presentational. Consumers should handle accessibility expectations, such as ensuring that an overflowing, scrollable code block or table is keyboard accessible.",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Markdown",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Markdown",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/markdown.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/markdown/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "One of `:article`, `:div`, or `:td`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::NavList",
    "description": "`NavList` provides a simple way to render side navigation, i.e. navigation\nthat appears to the left or right side of some main content. Each group in a\nnav list is a list of links.\n\nNav list groups can contain sub items. Rather than navigating to a URL, groups\nwith sub items expand and collapse on click. To indicate this functionality, the\ngroup will automatically render with a trailing chevron icon that changes direction\nwhen the group expands and collapses.\n\nNav list items appear visually active when selected. Each nav item must have one\nor more ID values that determine which item will appear selected. Use the\n`selected_item_id` argument to select the appropriate item.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "NavList",
    "status": "beta",
    "a11y_reviewed": true,
    "short_name": "NavList",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/default/",
    "parameters": [
      {
        "name": "selected_item_id",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "The heading for the list at large. Accepts the arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Heading{{/link_to_component}}.",
        "parameters": []
      },
      {
        "name": "items",
        "description": "Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.",
        "parameters": []
      }
    ],
    "methods": [
      {
        "name": "with_item",
        "description": "Adds an item to the list.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`Primer::Beta::NavList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_avatar_item",
        "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The source url of the avatar image."
          },
          {
            "name": "username",
            "type": "String",
            "default": "N/A",
            "description": "The username associated with the avatar."
          },
          {
            "name": "full_name",
            "type": "String",
            "default": "`nil`",
            "description": "Optional. The user's full name."
          },
          {
            "name": "full_name_scheme",
            "type": "Symbol",
            "default": "`:block`",
            "description": "Optional. How to display the user's full name. One of `:block` or `:inline`."
          },
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`Primer::Beta::NavList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
          },
          {
            "name": "avatar_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_group",
        "description": "Adds a group to the list. A group is a list of links and a (required) heading.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
          }
        ],
        "return_types": []
      },
      {
        "name": "with_divider",
        "description": "Adds a divider to the list. Dividers visually separate items and groups.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
          }
        ],
        "return_types": []
      },
      {
        "name": "build_item",
        "description": "Builds a new item but does not add it to the list. Use this method\ninstead of the `#with_item` slot if you need to render an item outside\nthe context of a list, eg. if rendering additional items to append to\nan existing list, perhaps via a separate HTTP request.",
        "parameters": [
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`Primer::Beta::NavList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "build_avatar_item",
        "description": "Builds a new avatar item but does not add it to the list. Avatar items\nare a convenient way to accessibly add an item with a leading avatar\nimage. Use this method instead of the `#with_avatar_item` slot if you\nneed to render an avatar item outside the context of a list, eg. if\nrendering additional items to append to an existing list, perhaps via\na separate HTTP request.",
        "parameters": [
          {
            "name": "src",
            "type": "String",
            "default": "N/A",
            "description": "The source url of the avatar image."
          },
          {
            "name": "username",
            "type": "String",
            "default": "N/A",
            "description": "The username associated with the avatar."
          },
          {
            "name": "full_name",
            "type": "String",
            "default": "`nil`",
            "description": "Optional. The user's full name."
          },
          {
            "name": "full_name_scheme",
            "type": "Symbol",
            "default": "`:block`",
            "description": "Optional. How to display the user's full name. One of `:block` or `:inline`."
          },
          {
            "name": "component_klass",
            "type": "Class",
            "default": "`Primer::Beta::NavList::Item`",
            "description": "The class to use instead of the default {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}"
          },
          {
            "name": "avatar_arguments",
            "type": "Hash",
            "default": "`{}`",
            "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
          }
        ],
        "return_types": []
      },
      {
        "name": "render_outer_list?",
        "description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a `<ul>`",
        "parameters": [],
        "return_types": [
          "Boolean"
        ]
      }
    ],
    "previews": [
      {
        "preview_path": "primer/beta/nav_list/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/top_level_items",
        "name": "top_level_items",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/show_more_item",
        "name": "show_more_item",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/trailing_action",
        "name": "trailing_action",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/truncate",
        "name": "truncate",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/long_label_wrap",
        "name": "long_label_wrap",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/long_label_show_tooltip_no_truncate_label",
        "name": "long_label_show_tooltip_no_truncate_label",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/nav_list/group_long_label_with_tooltip",
        "name": "group_long_label_with_tooltip",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::NavList::Heading",
        "description": "The heading placed above a `NavList`'s items.\n\nSee {{#link_to_component}}Primer::Beta::NavList{{/link_to_component}} for usage examples.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "NavList::Heading",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "NavListHeading",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/heading.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/heading/default/",
        "parameters": [
          {
            "name": "title",
            "type": "String",
            "default": "N/A",
            "description": "The text content of the heading."
          },
          {
            "name": "id",
            "type": "String",
            "default": "`self.class.generate_id`",
            "description": "The value of the ID HTML attribute. Auto-generated by default."
          },
          {
            "name": "heading_level",
            "type": "Integer",
            "default": "`2`",
            "description": "The heading level, i.e. 2 for an `<h2>`, 3 for an `<h3>`, etc."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [
          {
            "name": "title",
            "description": "Returns the value of attribute title.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "id",
            "description": "Returns the value of attribute id.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "heading_level",
            "description": "Returns the value of attribute heading_level.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "system_arguments",
            "description": "Returns the value of attribute system_arguments.",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Beta::NavList::Item",
        "description": "Items are rendered as styled links. They can optionally include leading and/or trailing visuals,\nsuch as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the\n`selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also\nthemselves contain sub items. Sub items are rendered collapsed by default.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": true,
        "component": "NavList::Item",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "NavListItem",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/item.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/item/default/",
        "parameters": [
          {
            "name": "selected_item_id",
            "type": "Symbol",
            "default": "`nil`",
            "description": "The ID of the currently selected list item. Used internally."
          },
          {
            "name": "selected_by_ids",
            "type": "Array<Symbol>",
            "default": "`[]`",
            "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
          },
          {
            "name": "expanded",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
          },
          {
            "name": "sub_item",
            "type": "Boolean",
            "default": "`false`",
            "description": "Whether or not this item is nested under a parent item. Used internally."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "items",
            "description": null,
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "description",
            "description": "Description content that complements the item's label, with optional test_selector.\nSee `ActionList`'s `description_scheme` argument for layout options.",
            "parameters": [
              {
                "name": "legacy_content",
                "type": "String",
                "default": "N/A",
                "description": "Slot content, provided for backwards-compatibility. Pass a content block instead, or call `with_content`, eg. `component.with_description { \"My description\" }` or `component.with_description.with_content(\"My description\")`."
              },
              {
                "name": "test_selector",
                "type": "String",
                "default": "N/A",
                "description": "The value of this argument is set as the value of a `data-test-selector` HTML attribute on the description element."
              }
            ]
          },
          {
            "name": "leading_visual",
            "description": "An icon, avatar, SVG, or custom content that will render to the left of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render an SVG, call the `with_leading_visual_svg` method.\n\nTo render custom content, call the `with_leading_visual_content` method and pass a block that returns a string.",
            "parameters": []
          },
          {
            "name": "trailing_visual",
            "description": "An icon, label, counter, or text to render to the right of the label.\n\nTo render an icon, call the `with_leading_visual_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.\n\nTo render a label, call the `with_leading_visual_label` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Label{{/link_to_component}}.\n\nTo render a counter, call the `with_leading_visual_counter` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.\n\nTo render text, call the `with_leading_visual_text` method and pass a block that returns a string. Eg:\n```ruby\nwith_leading_visual_text { \"Text here\" }\n```",
            "parameters": []
          },
          {
            "name": "trailing_action",
            "description": "A button rendered after the trailing icon that can be used to show a menu, activate\na dialog, etc.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "tooltip",
            "description": "`Tooltip` that appears on mouse hover or keyboard focus over the trailing action button. Use tooltips sparingly and as\na last resort. **Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be\nmore appropriate. Consult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
            "parameters": [
              {
                "name": "type",
                "type": "Symbol",
                "default": "`:description`",
                "description": "One of `:description` or `:label`."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "selected_by_ids",
            "description": "Returns the value of attribute selected_by_ids.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "sub_item",
            "description": "Returns the value of attribute sub_item.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "sub_item?",
            "description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          },
          {
            "name": "expand!",
            "description": "Cause this item to show its list of sub items when rendered.",
            "parameters": [],
            "return_types": []
          },
          {
            "name": "item_active?",
            "description": "Normally it would be easier to simply ask each item for its active status, eg.\nitems.any?(&:active?), but unfortunately the view context is not set on each\nitem until _after_ the parent's before_render, etc methods have been called.\nThis means helper methods like current_page? will blow up with an error, since\n`helpers` is simply an alias for the view context (i.e. an instance of\nActionView::Base). Since we know the view context for the parent object must\nbe set before `before_render` is invoked, we can call helper methods here in\nthe parent and bypass the problem entirely. Maybe not the most OO approach,\nbut it works.",
            "parameters": [],
            "return_types": [
              "Boolean"
            ]
          }
        ],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Beta::NavList::Divider",
        "description": "Separator with optional text rendered above groups or between individual items.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "NavList::Divider",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "NavListDivider",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/divider.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/divider/default/",
        "parameters": [
          {
            "name": "scheme",
            "type": "Symbol",
            "default": "`:subtle`",
            "description": "Display a background color if scheme is `filled`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      },
      {
        "fully_qualified_name": "Primer::Beta::NavList::Group",
        "description": "A logical grouping of navigation links with an optional heading.\n\nSee {{#link_to_component}}Primer::Beta::NavList{{/link_to_component}} for usage examples.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": true,
        "component": "NavList::Group",
        "status": "alpha",
        "a11y_reviewed": true,
        "short_name": "NavListGroup",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/nav_list/group.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/nav_list/group/default/",
        "parameters": [
          {
            "name": "selected_item_id",
            "type": "Symbol",
            "default": "`nil`",
            "description": "The ID of the currently selected item. Used internally."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ],
        "slots": [
          {
            "name": "show_more_item",
            "description": "A special \"show more\" list item that appears at the bottom of the group. Clicking\nthe item will fetch the next page of results from the URL passed in the `src` argument\nand append the resulting chunk of HTML to the group.",
            "parameters": [
              {
                "name": "src",
                "type": "String",
                "default": "N/A",
                "description": "The URL to query for additional pages of list items."
              },
              {
                "name": "pages",
                "type": "Integer",
                "default": "N/A",
                "description": "The total number of pages in the result set."
              },
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "A component class to use instead of the default `Primer::Beta::NavList::Item` class."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "items",
            "description": "Items.",
            "parameters": [
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}."
              }
            ]
          },
          {
            "name": "heading",
            "description": "Heading text rendered above the list of items.",
            "parameters": [
              {
                "name": "component_klass",
                "type": "Class",
                "default": "N/A",
                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
              },
              {
                "name": "system_arguments",
                "type": "Hash",
                "default": "N/A",
                "description": "The arguments accepted by `component_klass`."
              }
            ]
          }
        ],
        "methods": [
          {
            "name": "expand!",
            "description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
            "parameters": [],
            "return_types": []
          }
        ],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::Octicon",
    "description": "`Octicon` renders an {{link_to_octicons}} with {{link_to_system_arguments_docs}}.\n`Octicon` can also be rendered with the `primer_octicon` helper, which accepts the same arguments.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Octicon",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Octicon",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/octicon.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/octicon/default/",
    "parameters": [
      {
        "name": "icon_name",
        "type": "Symbol, String",
        "default": "`nil`",
        "description": "Name of {{link_to_octicons}} to use."
      },
      {
        "name": "icon",
        "type": "Symbol, String",
        "default": "`nil`",
        "description": "Name of {{link_to_octicons}} to use."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:small`",
        "description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
      },
      {
        "name": "use_symbol",
        "type": "Boolean",
        "default": "`false`",
        "description": "EXPERIMENTAL (May change or be removed) - Set to true when using with {{#link_to_component}}Primer::Alpha::OcticonSymbols{{/link_to_component}}."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/octicon/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/octicon/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Popover",
    "description": "Use `Popover` to bring attention to specific user interface elements, typically to suggest an action or to guide users through a new experience.\n\nBy default, the popover renders with absolute positioning, meaning it should usually be wrapped in an element with a relative position in order to be positioned properly. To render the popover with relative positioning, use the relative property.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Popover",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Popover",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "The heading",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "`:h4`",
            "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "body",
        "description": "The body",
        "parameters": [
          {
            "name": "caret",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:bottom`, `:bottom_left`, `:bottom_right`, `:left`, `:left_bottom`, `:left_top`, `:right`, `:right_bottom`, `:right_top`, `:top`, `:top_left`, or `:top_right`."
          },
          {
            "name": "large",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether to use the large version of the component."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/popover/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/large",
        "name": "large",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/bottom_right",
        "name": "bottom_right",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/top_right",
        "name": "top_right",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/bottom_left",
        "name": "bottom_left",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/popover/top_left",
        "name": "top_left",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::ProgressBar",
    "description": "Use `ProgressBar` to visualize task completion.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ProgressBar",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "ProgressBar",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/progress_bar.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/progress_bar/default/",
    "parameters": [
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:default`, `:large`, or `:small`. Increases height."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "items",
        "description": "Use the Item slot to add an item to the progress bar",
        "parameters": [
          {
            "name": "percentage",
            "type": "Integer",
            "default": "N/A",
            "description": "The percent complete"
          },
          {
            "name": "bg",
            "type": "Symbol",
            "default": "N/A",
            "description": "The background color"
          },
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{link_to_system_arguments_docs}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/progress_bar/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/progress_bar/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/progress_bar/size_small",
        "name": "size_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/progress_bar/size_default",
        "name": "size_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/progress_bar/size_large",
        "name": "size_large",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::RelativeTime",
    "description": "Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "RelativeTime",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "RelativeTime",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/relative_time.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/relative_time/default/",
    "parameters": [
      {
        "name": "datetime",
        "type": "Time",
        "default": "N/A",
        "description": "The time to be formatted."
      },
      {
        "name": "tense",
        "type": "Symbol",
        "default": "`:auto`",
        "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
      },
      {
        "name": "prefix",
        "type": "String",
        "default": "`nil`",
        "description": "What to prefix the relative time display with."
      },
      {
        "name": "second",
        "type": "Symbol",
        "default": "`SECOND_DEFAULT`",
        "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
      },
      {
        "name": "minute",
        "type": "Symbol",
        "default": "`MINUTE_DEFAULT`",
        "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
      },
      {
        "name": "hour",
        "type": "Symbol",
        "default": "`HOUR_DEFAULT`",
        "description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
      },
      {
        "name": "weekday",
        "type": "Symbol",
        "default": "`WEEKDAY_DEFAULT`",
        "description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
      },
      {
        "name": "day",
        "type": "Symbol",
        "default": "`DAY_DEFAULT`",
        "description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
      },
      {
        "name": "month",
        "type": "Symbol",
        "default": "`MONTH_DEFAULT`",
        "description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
      },
      {
        "name": "year",
        "type": "Symbol",
        "default": "`YEAR_DEFAULT`",
        "description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
      },
      {
        "name": "time_zone_name",
        "type": "Symbol",
        "default": "`TIMEZONENAME_DEFAULT`",
        "description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
      },
      {
        "name": "time_zone",
        "type": "String",
        "default": "`nil`",
        "description": "The IANA time zone identifier to use for formatting (e.g., \"America/New_York\")."
      },
      {
        "name": "threshold",
        "type": "String",
        "default": "`nil`",
        "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
      },
      {
        "name": "precision",
        "type": "Symbol",
        "default": "`PRECISION_DEFAULT`",
        "description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
      },
      {
        "name": "format",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
      },
      {
        "name": "format_style",
        "type": "Symbol",
        "default": "`nil`",
        "description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
      },
      {
        "name": "lang",
        "type": "String",
        "default": "`nil`",
        "description": "The language to use."
      },
      {
        "name": "title",
        "type": "String",
        "default": "`nil`",
        "description": "Provide a custom title to the element."
      },
      {
        "name": "no_title",
        "type": "Boolean",
        "default": "`false`",
        "description": "Removes the `title` attribute provided on the element by default."
      },
      {
        "name": "aria_hidden",
        "type": "Boolean",
        "default": "`nil`",
        "description": "Set if the element is hidden or not."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/relative_time/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/micro_format",
        "name": "micro_format",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/recent_time",
        "name": "recent_time",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/count_down_timer",
        "name": "count_down_timer",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/no_title_attribute",
        "name": "no_title_attribute",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/relative_time/link_with_tooltip",
        "name": "link_with_tooltip",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Spinner",
    "description": "Use `Spinner` to let users know that content is being loaded.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Spinner",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Spinner",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
    "parameters": [
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
      },
      {
        "name": "style",
        "type": "String",
        "default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
        "description": "Custom element styles."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/spinner/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/spinner/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::State",
    "description": "Use `State` for rendering the status of an item.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "State",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "State",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
    "parameters": [
      {
        "name": "title",
        "type": "String",
        "default": "N/A",
        "description": "`title` HTML attribute."
      },
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:span`",
        "description": "HTML tag for element. One of `:div` or `:span`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:default` or `:small`."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/state/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/states_default",
        "name": "states_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/states_open",
        "name": "states_open",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/states_closed",
        "name": "states_closed",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/states_merged",
        "name": "states_merged",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/sizes_default",
        "name": "sizes_default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/state/sizes_small",
        "name": "sizes_small",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Subhead",
    "description": "Use `Subhead` as the start of a section. The `:heading` slot will render an `<h2>` font-sized text.\n\n- Optionally set the `:description` slot to render a short description and the `:actions` slot for a related action.\n- Use a succinct, one-line description for the `:description` slot. For longer descriptions, omit the description slot and render a paragraph below the `Subhead`.\n- Use the actions slot to render a related action to the right of the heading. Use {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}} or {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}.",
    "accessibility_docs": "The `:heading` slot defaults to rendering a `<div>`. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Subhead",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Subhead",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
    "parameters": [
      {
        "name": "spacious",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to add spacing to the Subhead."
      },
      {
        "name": "hide_border",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to hide the border under the heading."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "heading",
        "description": "The heading",
        "parameters": [
          {
            "name": "tag",
            "type": "Symbol",
            "default": "N/A",
            "description": "One of `:div`, `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
          },
          {
            "name": "danger",
            "type": "Boolean",
            "default": "N/A",
            "description": "Whether to style the heading as dangerous."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "actions",
        "description": "Actions",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "description",
        "description": "The description",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/subhead/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/danger",
        "name": "danger",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/actions",
        "name": "actions",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/spacing_default",
        "name": "spacing_default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/spacing_spacious",
        "name": "spacing_spacious",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/spacing_dangerous",
        "name": "spacing_dangerous",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/large_header",
        "name": "large_header",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/subhead/medium_header",
        "name": "medium_header",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::Text",
    "description": "`Text` is a wrapper component that will apply typography styles to the text inside.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Text",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Text",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:span`",
        "description": ""
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/text/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/text/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Beta::TimelineItem",
    "description": "Use `TimelineItem` to display items on a vertical timeline, connected by badge elements.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "TimelineItem",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "TimelineItem",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
    "parameters": [
      {
        "name": "condensed",
        "type": "Boolean",
        "default": "`false`",
        "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "avatar",
        "description": "Avatar to be rendered to the left of the Badge.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "badge",
        "description": "Badge that will be connected to other TimelineItems.",
        "parameters": [
          {
            "name": "icon",
            "type": "String",
            "default": "N/A",
            "description": "Name of {{link_to_octicons}} to use."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "body",
        "description": "Body to be rendered to the left of the Badge.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/timeline_item/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/timeline_item/default",
        "name": "default",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::TimelineItem::Badge",
        "description": "This component is part of `Primer::Beta::TimelineItem` and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "TimelineItem::Badge",
        "status": "beta",
        "a11y_reviewed": false,
        "short_name": "TimelineItemBadge",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item/badge.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/badge/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::Beta::Truncate",
    "description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Truncate",
    "status": "beta",
    "a11y_reviewed": false,
    "short_name": "Truncate",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "items",
        "description": "Text slot used for the truncated text.",
        "parameters": [
          {
            "name": "priority",
            "type": "Boolean",
            "default": "N/A",
            "description": "if true, the text will be given priority"
          },
          {
            "name": "expandable",
            "type": "Boolean",
            "default": "N/A",
            "description": "if true, the text will expand on hover or focus"
          },
          {
            "name": "max_width",
            "type": "Integer",
            "default": "N/A",
            "description": "if provided, the text will be truncated at a maximum width"
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/beta/truncate/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/truncate/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/truncate/multiple_items",
        "name": "multiple_items",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/truncate/advanced_multiple_items",
        "name": "advanced_multiple_items",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/beta/truncate/max_widths",
        "name": "max_widths",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": [
      {
        "fully_qualified_name": "Primer::Beta::Truncate::TruncateText",
        "description": "This component is part of `Primer::Beta::Truncate` and should not be\nused as a standalone component.",
        "accessibility_docs": null,
        "is_form_component": false,
        "is_published": true,
        "requires_js": false,
        "component": "Truncate::TruncateText",
        "status": "alpha",
        "a11y_reviewed": false,
        "short_name": "TruncateTruncateText",
        "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate/truncate_text.rb",
        "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/truncate_text/default/",
        "parameters": [],
        "slots": [],
        "methods": [],
        "previews": [],
        "subcomponents": []
      }
    ]
  },
  {
    "fully_qualified_name": "Primer::BlankslateComponent",
    "description": "Use `Blankslate` when there is a lack of content within a page or section. Use as placeholder to tell users why something isn't there.",
    "accessibility_docs": "`Blankslate` renders an `<h3>` element for the title by default. Update the heading level based on what is appropriate for your page hierarchy by setting `title_tag`.\n[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)",
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Blankslate",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Blankslate",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/blankslate_component.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/blankslate/default/",
    "parameters": [
      {
        "name": "title",
        "type": "String",
        "default": "`\"\"`",
        "description": "Text that appears in a larger bold font."
      },
      {
        "name": "title_tag",
        "type": "Symbol",
        "default": "`:h3`",
        "description": "HTML tag to use for title."
      },
      {
        "name": "icon",
        "type": "Symbol",
        "default": "`\"\"`",
        "description": "Octicon icon to use at top of component."
      },
      {
        "name": "icon_size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
      },
      {
        "name": "image_src",
        "type": "String",
        "default": "`\"\"`",
        "description": "Image to display."
      },
      {
        "name": "image_alt",
        "type": "String",
        "default": "`\" \"`",
        "description": "Alt text for image."
      },
      {
        "name": "description",
        "type": "String",
        "default": "`\"\"`",
        "description": "Text that appears below the title. Typically a whole sentence."
      },
      {
        "name": "button_text",
        "type": "String",
        "default": "`\"\"`",
        "description": "The text of the button."
      },
      {
        "name": "button_url",
        "type": "String",
        "default": "`\"\"`",
        "description": "The URL where the user will be taken after clicking the button."
      },
      {
        "name": "button_classes",
        "type": "String",
        "default": "`\"btn-primary my-3\"`",
        "description": "Classes to apply to action button"
      },
      {
        "name": "link_text",
        "type": "String",
        "default": "`\"\"`",
        "description": "The text of the link."
      },
      {
        "name": "link_url",
        "type": "String",
        "default": "`\"\"`",
        "description": "The URL where the user will be taken after clicking the link."
      },
      {
        "name": "narrow",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds a maximum width."
      },
      {
        "name": "large",
        "type": "Boolean",
        "default": "`false`",
        "description": "Increases the font size."
      },
      {
        "name": "spacious",
        "type": "Boolean",
        "default": "`false`",
        "description": "Adds extra padding."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "spinner",
        "description": "Optional Spinner.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Spinner{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Box",
    "description": "`Box` is a basic wrapper component for most layout related needs.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Box",
    "status": "stable",
    "a11y_reviewed": false,
    "short_name": "Box",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
    "parameters": [
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [
      {
        "preview_path": "primer/box/playground",
        "name": "playground",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/box/default",
        "name": "default",
        "snapshot": "false",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/box/border",
        "name": "border",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      },
      {
        "preview_path": "primer/box/border_bottom",
        "name": "border_bottom",
        "snapshot": "true",
        "skip_rules": {
          "wont_fix": [
            "region"
          ],
          "will_fix": [
            "color-contrast"
          ]
        }
      }
    ],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::ButtonComponent",
    "description": "Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "Button",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Button",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
    "parameters": [
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
      },
      {
        "name": "variant",
        "type": "Symbol",
        "default": "`nil`",
        "description": "DEPRECATED. One of `:medium` or `:small`."
      },
      {
        "name": "size",
        "type": "Symbol",
        "default": "`:medium`",
        "description": "One of `:medium` or `:small`."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "`:button`",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "group_item",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether button is part of a ButtonGroup."
      },
      {
        "name": "block",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether button is full-width with `display: block`."
      },
      {
        "name": "dropdown",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether or not to render a dropdown caret."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "leading_visual",
        "description": "Leading visuals appear to the left of the button text.\n\nUse:\n\n- `leading_visual_icon` for a {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "trailing_visual",
        "description": "Trailing visuals appear to the right of the button text.\n\nUse:\n\n- `trailing_visual_counter` for a {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "tooltip",
        "description": "`Tooltip` that appears on mouse hover or keyboard focus over the button. Use tooltips sparingly and as a last resort.\n**Important:** This tooltip defaults to `type: :description`. In a few scenarios, `type: :label` may be more appropriate.\nConsult the {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}} documentation for more information.",
        "parameters": [
          {
            "name": "type",
            "type": "Symbol",
            "default": "`:description`",
            "description": "One of `:description` or `:label`."
          },
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "Same arguments as {{#link_to_component}}Primer::Alpha::Tooltip{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [
      {
        "name": "icon",
        "description": "remove alias when all buttons are migrated to new slot names",
        "parameters": [],
        "return_types": []
      },
      {
        "name": "counter",
        "description": "remove alias when all buttons are migrated to new slot names",
        "parameters": [],
        "return_types": []
      }
    ],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::ConditionalWrapper",
    "description": "Conditionally renders a component around the given content. If the given condition\nis true, the component will render around the content. If the condition is false, only\nthe content is rendered.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "ConditionalWrapper",
    "status": "alpha",
    "a11y_reviewed": false,
    "short_name": "ConditionalWrapper",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/conditional_wrapper.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/conditional_wrapper/default/",
    "parameters": [
      {
        "name": "condition",
        "type": "Boolean",
        "default": "N/A",
        "description": "Whether or not to wrap the content in a component."
      },
      {
        "name": "component",
        "type": "Class",
        "default": "`Primer::BaseComponent`",
        "description": "The component class to use as a wrapper, defaults to `Primer::BaseComponent`"
      },
      {
        "name": "base_component_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "The arguments to pass to the component."
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Content",
    "description": "Use `Content` as a helper to render content passed to a slot without adding any tags.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Content",
    "status": "stable",
    "a11y_reviewed": false,
    "short_name": "Content",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/content.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/content/default/",
    "parameters": [],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::IconButton",
    "description": "Use `IconButton` to render Icon-only buttons without the default button styles.\n\n`IconButton` will always render with a tooltip unless the tag is `:summary`.",
    "accessibility_docs": "`IconButton` requires an `aria-label`, which will provide assistive technologies with an accessible label.\nThe `aria-label` should describe the action to be invoked rather than the icon itself. For instance,\nif your `IconButton` renders a magnifying glass icon and invokes a search action, the `aria-label` should be\n`\"Search\"` instead of `\"Magnifying glass\"`.\nEither `aria-label` or `aria-description` will be used for the `Tooltip` text, depending on which one is present.\n[Learn more about best functional image practices (WAI Images)](https://www.w3.org/WAI/tutorials/images/functional)",
    "is_form_component": false,
    "is_published": true,
    "requires_js": true,
    "component": "IconButton",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "IconButton",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
    "parameters": [
      {
        "name": "scheme",
        "type": "Symbol",
        "default": "`:default`",
        "description": "One of `:danger` or `:default`."
      },
      {
        "name": "icon",
        "type": "String",
        "default": "N/A",
        "description": "Name of {{link_to_octicons}} to use."
      },
      {
        "name": "tag",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:a`, `:button`, `:clipboard-copy`, or `:summary`."
      },
      {
        "name": "type",
        "type": "Symbol",
        "default": "N/A",
        "description": "One of `:button`, `:reset`, or `:submit`."
      },
      {
        "name": "aria-label",
        "type": "String",
        "default": "N/A",
        "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
      },
      {
        "name": "aria-description",
        "type": "String",
        "default": "N/A",
        "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
      },
      {
        "name": "tooltip_direction",
        "type": "Symbol",
        "default": "`:s`",
        "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
      },
      {
        "name": "box",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the button is in a {{#link_to_component}}Primer::Beta::BorderBox{{/link_to_component}}. If `true`, the button will have the `Box-btn-octicon` class."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::LayoutComponent",
    "description": "Use `Layout` to build a main/sidebar layout.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Layout",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Layout",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
    "parameters": [
      {
        "name": "responsive",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether to collapse layout to a single column at smaller widths."
      },
      {
        "name": "side",
        "type": "Symbol",
        "default": "`:right`",
        "description": "Which side to display the sidebar on. One of `:left` or `:right`."
      },
      {
        "name": "sidebar_col",
        "type": "Integer",
        "default": "`3`",
        "description": "Sidebar column width."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "main",
        "description": "The main content",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "sidebar",
        "description": "The sidebar content",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      }
    ],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Navigation::TabComponent",
    "description": "nodoc",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Navigation::Tab",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "NavigationTab",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
    "parameters": [
      {
        "name": "list",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab is an item in a `<ul>` list."
      },
      {
        "name": "selected",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab is selected or not."
      },
      {
        "name": "with_panel",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the Tab has an associated panel."
      },
      {
        "name": "panel_id",
        "type": "String",
        "default": "`\"\"`",
        "description": "Only applies if `with_panel` is `true`. Unique id of panel."
      },
      {
        "name": "icon_classes",
        "type": "Boolean",
        "default": "`\"\"`",
        "description": "Classes that must always be applied to icons."
      },
      {
        "name": "wrapper_arguments",
        "type": "Hash",
        "default": "`{}`",
        "description": "{{link_to_system_arguments_docs}} to be used in the `<li>` wrapper when the tab is an item in a list."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [
      {
        "name": "panel",
        "description": "Panel controlled by the Tab. This will not render anything in the tab itself.\nIt will provide a accessor for the Tab's parent to call and render the panel\ncontent in the appropriate place.\nRefer to `UnderlineNav` and `TabNav` implementations for examples.",
        "parameters": [
          {
            "name": "system_arguments",
            "type": "Hash",
            "default": "N/A",
            "description": "{{link_to_system_arguments_docs}}"
          }
        ]
      },
      {
        "name": "icon",
        "description": "Icon to be rendered in the Tab left.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "text",
        "description": "The Tab's text.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Text{{/link_to_component}}."
          }
        ]
      },
      {
        "name": "counter",
        "description": "Counter to be rendered in the Tab right.",
        "parameters": [
          {
            "name": "kwargs",
            "type": "Hash",
            "default": "N/A",
            "description": "The same arguments as {{#link_to_component}}Primer::Beta::Counter{{/link_to_component}}."
          }
        ]
      }
    ],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Tooltip",
    "description": "`Tooltip` is a wrapper component that will apply a tooltip to the provided content.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Tooltip",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Tooltip",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
    "parameters": [
      {
        "name": "label",
        "type": "String",
        "default": "N/A",
        "description": "the text to appear in the tooltip"
      },
      {
        "name": "direction",
        "type": "String",
        "default": "`:n`",
        "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
      },
      {
        "name": "align",
        "type": "String",
        "default": "`:default`",
        "description": "Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`, `:right_1`, or `:right_2`."
      },
      {
        "name": "multiline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Use this when you have long content"
      },
      {
        "name": "no_delay",
        "type": "Boolean",
        "default": "`false`",
        "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "fully_qualified_name": "Primer::Truncate",
    "description": "Use `Truncate` to shorten overflowing text with an ellipsis.",
    "accessibility_docs": null,
    "is_form_component": false,
    "is_published": true,
    "requires_js": false,
    "component": "Truncate",
    "status": "deprecated",
    "a11y_reviewed": false,
    "short_name": "Truncate",
    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
    "parameters": [
      {
        "name": "tag",
        "type": "Symbol",
        "default": "`:div`",
        "description": "One of `:div`, `:p`, `:span`, or `:strong`."
      },
      {
        "name": "inline",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the element is inline (or inline-block)."
      },
      {
        "name": "expandable",
        "type": "Boolean",
        "default": "`false`",
        "description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
      },
      {
        "name": "max_width",
        "type": "Integer",
        "default": "`nil`",
        "description": "Sets the max-width of the text."
      },
      {
        "name": "system_arguments",
        "type": "Hash",
        "default": "N/A",
        "description": "{{link_to_system_arguments_docs}}"
      }
    ],
    "slots": [],
    "methods": [],
    "previews": [],
    "subcomponents": []
  },
  {
    "component": "BaseComponent",
    "fully_qualified_name": "Primer::BaseComponent",
    "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n  Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
    "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding top. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |\n| trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. |"
  }
]