npm - @primer/view-components - Versions diffs - 0.6.0-rc.dbee1f48 → 0.6.1-rc.1fca6dcf - Mend

@primer/view-components 0.6.0-rc.dbee1f48 → 0.6.1-rc.1fca6dcf

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +3 -1
package/app/assets/javascripts/primer_view_components.js +1 -1
package/app/assets/javascripts/primer_view_components.js.map +1 -1
package/app/components/primer/alpha/x_banner.d.ts +3 -1
package/app/components/primer/alpha/x_banner.js +24 -10
package/package.json +1 -1
package/static/arguments.json +4 -10
package/static/constants.json +6 -0
package/static/info_arch.json +267 -25
package/static/previews.json +2 -2

package/static/info_arch.json CHANGED Viewed

@@ -2,6 +2,7 @@
   {
     "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,
@@ -127,6 +128,7 @@
       {
         "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,
@@ -155,6 +157,7 @@
       {
         "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,
@@ -185,6 +188,7 @@
   {
     "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,
@@ -270,11 +274,17 @@
         "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": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
+            "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."
           }
         ]
       },
@@ -318,17 +328,23 @@
             "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}}."
+            "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}}."
+            "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."
           }
         ]
       },
@@ -353,6 +369,72 @@
         ]
       },
+      {
+        "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."
+          }
+        ]
+      },
+      {
+        "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."
+          }
+        ]
+      },
       {
         "name": "post_list_content_block",
         "description": "Returns the value of attribute post_list_content_block.",
@@ -653,6 +735,7 @@
       {
         "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,
@@ -893,6 +976,7 @@
       {
         "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,
@@ -963,6 +1047,7 @@
       {
         "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,
@@ -991,6 +1076,7 @@
       {
         "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,
@@ -1032,6 +1118,7 @@
   {
     "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 users 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`.",
+    "accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything nested 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 [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,
@@ -1567,6 +1654,7 @@
       {
         "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,
@@ -1626,7 +1714,7 @@
                 "name": "system_arguments",
                 "type": "Hash",
                 "default": "N/A",
-                "description": "The same arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
+                "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."
               }
             ]
           },
@@ -1674,7 +1762,7 @@
                 "name": "system_arguments",
                 "type": "Hash",
                 "default": "N/A",
-                "description": "The same arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
+                "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."
               }
             ]
           }
@@ -1691,6 +1779,7 @@
   {
     "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,
@@ -1886,6 +1975,7 @@
       {
         "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,
@@ -1939,6 +2029,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Banner",
     "description": "Use `Banner` to highlight important information.",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -1962,10 +2053,10 @@
         "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
       },
       {
-        "name": "dismissible",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether the component can be dismissed with an \"x\" button."
+        "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": "description",
@@ -1985,12 +2076,6 @@
         "default": "`:default`",
         "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
       },
-      {
-        "name": "reappear",
-        "type": "Boolean",
-        "default": "`false`",
-        "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
-      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -2090,8 +2175,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/banner/dismissable",
-        "name": "dismissable",
+        "preview_path": "primer/alpha/banner/dismissible",
+        "name": "dismissible",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -2162,6 +2247,7 @@
   {
     "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": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -2328,6 +2414,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -2564,6 +2651,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -2715,6 +2803,7 @@
   {
     "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,
@@ -2974,6 +3063,7 @@
       {
         "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,
@@ -3031,6 +3121,7 @@
       {
         "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,
@@ -3070,6 +3161,7 @@
       {
         "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,
@@ -3105,6 +3197,7 @@
   {
     "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,
@@ -3383,6 +3476,7 @@
       {
         "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,
@@ -3411,6 +3505,7 @@
       {
         "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,
@@ -3487,6 +3582,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -3562,6 +3658,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::FormControl",
     "description": "Wraps an input (or arbitrary content) with a label above and a caption and validation message beneath.\nNOTE: This `FormControl` component is designed for wrapping inputs that aren't supported by the Primer\nforms framework.",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -3721,6 +3818,7 @@
   {
     "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,
@@ -3791,6 +3889,7 @@
   {
     "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,
@@ -3861,6 +3960,7 @@
   {
     "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,
@@ -3912,6 +4012,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::ImageCrop",
     "description": "A client-side mechanism to crop images.",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -4006,6 +4107,7 @@
   {
     "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.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -4373,6 +4475,7 @@
       {
         "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,
@@ -4401,6 +4504,7 @@
       {
         "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,
@@ -4442,6 +4546,7 @@
   {
     "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,
@@ -4541,6 +4646,7 @@
   {
     "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": false,
     "requires_js": true,
@@ -4740,6 +4846,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::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,
@@ -4787,14 +4894,14 @@
           {
             "name": "component_klass",
             "type": "Class",
-            "default": "N/A",
-            "description": "The component class to use. Defaults to `Primer::Alpha::NavList::Item`."
+            "default": "`Primer::Alpha::NavList::Item`",
+            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::NavList::Item{{/link_to_component}}"
           },
           {
             "name": "system_arguments",
             "type": "Hash",
             "default": "N/A",
-            "description": "The arguments accepted by the `component_klass` class."
+            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
           }
         ]
       },
@@ -4829,20 +4936,20 @@
           {
             "name": "component_klass",
             "type": "Class",
-            "default": "N/A",
-            "description": "The component class to use. Defaults to `Primer::Alpha::NavList::Item`."
+            "default": "`Primer::Alpha::NavList::Item`",
+            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::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}}."
+            "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 the `component_klass` class."
+            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
           }
         ]
       },
@@ -4870,6 +4977,72 @@
           }
         ]
       },
+      {
+        "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::Alpha::NavList::Item`",
+            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::NavList::Item{{/link_to_component}}"
+          },
+          {
+            "name": "system_arguments",
+            "type": "Hash",
+            "default": "N/A",
+            "description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
+          }
+        ]
+      },
+      {
+        "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::Alpha::NavList::Item`",
+            "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::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::Alpha::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
+          }
+        ]
+      },
       {
         "name": "render_outer_list?",
         "description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>",
@@ -4949,6 +5122,7 @@
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Heading",
         "description": "The heading placed above a `NavList`'s items.\n\nSee {{#link_to_component}}Primer::Alpha::NavList{{/link_to_component}} for usage examples.",
+        "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
         "requires_js": false,
@@ -5027,6 +5201,7 @@
       {
         "fully_qualified_name": "Primer::Alpha::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,
@@ -5180,6 +5355,7 @@
       {
         "fully_qualified_name": "Primer::Alpha::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,
@@ -5219,6 +5395,7 @@
       {
         "fully_qualified_name": "Primer::Alpha::NavList::Group",
         "description": "A logical grouping of navigation links with an optional heading.\n\nSee {{#link_to_component}}Primer::Alpha::NavList{{/link_to_component}} for usage examples.",
+        "accessibility_docs": null,
         "is_form_component": false,
         "is_published": true,
         "requires_js": true,
@@ -5319,6 +5496,7 @@
   {
     "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,
@@ -5441,6 +5619,7 @@
   {
     "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,
@@ -5474,6 +5653,7 @@
   {
     "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,
@@ -5748,6 +5928,7 @@
       {
         "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,
@@ -5817,6 +5998,7 @@
       {
         "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,
@@ -5862,6 +6044,7 @@
       {
         "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,
@@ -5897,6 +6080,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -6109,6 +6293,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::RadioButtonGroup",
     "description": "A group of mutually exclusive radio buttons.",
+    "accessibility_docs": null,
     "is_form_component": true,
     "is_published": false,
     "requires_js": false,
@@ -6260,6 +6445,7 @@
   {
     "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,
@@ -6539,6 +6725,7 @@
       {
         "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,
@@ -6592,6 +6779,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -6871,6 +7059,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -6946,6 +7135,7 @@
   {
     "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,
@@ -6979,6 +7169,7 @@
   {
     "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) %> for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -7110,6 +7301,7 @@
   {
     "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,
@@ -7240,6 +7432,7 @@
   {
     "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": false,
     "requires_js": false,
@@ -7484,6 +7677,7 @@
   {
     "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": false,
@@ -7919,6 +8113,7 @@
   {
     "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,
@@ -8141,6 +8336,7 @@
   {
     "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  content.\n\nSemantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a\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,
@@ -8327,6 +8523,7 @@
   {
     "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) %> for additional\n  accessibility considerations.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -8457,6 +8654,7 @@
   {
     "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,
@@ -8580,6 +8778,7 @@
   {
     "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,
@@ -8968,6 +9167,7 @@
       {
         "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,
@@ -9068,6 +9268,7 @@
   {
     "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,
@@ -9286,6 +9487,7 @@
   {
     "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,
@@ -9470,6 +9672,7 @@
   {
     "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,
@@ -9578,6 +9781,7 @@
   {
     "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,
@@ -9861,6 +10065,7 @@
   {
     "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,
@@ -10040,6 +10245,7 @@
       {
         "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. <%= link_to_heading_practices %>",
         "is_form_component": false,
         "is_published": true,
         "requires_js": false,
@@ -10092,6 +10298,7 @@
   {
     "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,
@@ -10164,6 +10371,7 @@
       {
         "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,
@@ -10231,6 +10439,7 @@
   {
     "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": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -10553,6 +10762,7 @@
   {
     "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,
@@ -10673,6 +10883,7 @@
   {
     "fully_qualified_name": "Primer::Beta::ClipboardCopy",
     "description": "Use `ClipboardCopy` to copy element text content or input values to the clipboard.",
+    "accessibility_docs": "Always set an accessible label to help the user interact with the component.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": true,
@@ -10775,6 +10986,7 @@
   {
     "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,
@@ -10845,6 +11057,7 @@
   {
     "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,
@@ -11069,6 +11282,7 @@
   {
     "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,
@@ -11208,6 +11422,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Flash",
     "description": "Use `Flash` to inform users of successful or pending actions.",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -11398,6 +11613,7 @@
   {
     "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<%= link_to_heading_practices %>",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -11462,6 +11678,7 @@
   {
     "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)",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -11612,6 +11829,7 @@
   {
     "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,
@@ -11882,6 +12100,7 @@
   {
     "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,
@@ -12059,6 +12278,7 @@
   {
     "fully_qualified_name": "Primer::Beta::Markdown",
     "description": "Use `Markdown` to wrap markdown content.",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -12098,6 +12318,7 @@
   {
     "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,
@@ -12180,6 +12401,7 @@
   {
     "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,
@@ -12344,6 +12566,7 @@
   {
     "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,
@@ -12470,6 +12693,7 @@
   {
     "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,
@@ -12669,6 +12893,7 @@
   {
     "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,
@@ -12739,6 +12964,7 @@
   {
     "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,
@@ -12899,6 +13125,7 @@
   {
     "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<%= link_to_heading_practices %>",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -13081,6 +13308,7 @@
   {
     "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,
@@ -13145,6 +13373,7 @@
   {
     "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,
@@ -13247,6 +13476,7 @@
       {
         "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,
@@ -13277,6 +13507,7 @@
   {
     "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,
@@ -13400,6 +13631,7 @@
       {
         "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,
@@ -13430,6 +13662,7 @@
   {
     "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<%= link_to_heading_practices %>",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -13564,6 +13797,7 @@
   {
     "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,
@@ -13648,6 +13882,7 @@
   {
     "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,
@@ -13783,6 +14018,7 @@
   {
     "fully_qualified_name": "Primer::ConditionalWrapper",
     "description": "Conditionally renders a `Primer::BaseComponent` around the given content. If the given condition\nis true, a `Primer::BaseComponent` 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,
@@ -13811,6 +14047,7 @@
   {
     "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,
@@ -13839,6 +14076,7 @@
   {
     "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,
@@ -13920,6 +14158,7 @@
   {
     "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,
@@ -13994,6 +14233,7 @@
   {
     "fully_qualified_name": "Primer::Navigation::TabComponent",
     "description": "nodoc",
+    "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -14110,6 +14350,7 @@
   {
     "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,
@@ -14173,6 +14414,7 @@
   {
     "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,
@@ -14231,6 +14473,6 @@
     "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) used by [Primer React](https://primer.style/components/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\nSystem arguments include most HTML attributes. For example:\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| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\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 | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | 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 left. 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 `: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. |"
+    "args_md": "## HTML attributes\n\nSystem arguments include most HTML attributes. For example:\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| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\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 | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | 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 left. 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. |"
   }
 ]