@primer/view-components 0.6.0-rc.c911f8aa → 0.6.0

package/app/components/primer/alpha/x_banner.d.ts

@@ -1,7 +1,9 @@
 declare class XBannerElement extends HTMLElement {
+    #private;
     titleText: HTMLElement;
     dismiss(): void;
-    private shouldReappear;
+    show(): void;
+    hide(): void;
 }
 declare global {
     interface Window {

package/app/components/primer/alpha/x_banner.js

@@ -4,24 +4,38 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _XBannerElement_instances, _XBannerElement_dismissScheme_get;
 import { controller, target } from '@github/catalyst';
 let XBannerElement = class XBannerElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _XBannerElement_instances.add(this);
+    }
     dismiss() {
-        if (this.shouldReappear()) {
-            this.style.setProperty('visibility', 'hidden');
-            setTimeout(() => {
-                this.style.setProperty('visibility', 'visible');
-            }, 2000);
-            return;
-        }
         const parentElement = this.parentElement;
         if (!parentElement)
             return;
-        parentElement.removeChild(this);
+        if (__classPrivateFieldGet(this, _XBannerElement_instances, "a", _XBannerElement_dismissScheme_get) === 'remove') {
+            parentElement.removeChild(this);
+        }
+        else {
+            this.hide();
+        }
     }
-    shouldReappear() {
-        return this.getAttribute('data-reappear') === 'true';
+    show() {
+        this.style.setProperty('display', 'initial');
     }
+    hide() {
+        this.style.setProperty('display', 'none');
+    }
+};
+_XBannerElement_instances = new WeakSet(), _XBannerElement_dismissScheme_get = function _XBannerElement_dismissScheme_get() {
+    return this.getAttribute('data-dismiss-scheme');
 };
 __decorate([
     target

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.6.0-rc.c911f8aa",
+  "version": "0.6.0",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",

package/static/arguments.json

@@ -521,10 +521,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",
@@ -544,12 +544,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",

package/static/constants.json

@@ -146,6 +146,7 @@
   "Primer::Alpha::AutoComplete::Item": {
   },
   "Primer::Alpha::Banner": {
+    "DEFAULT_DISMISS_SCHEME": "none",
     "DEFAULT_ICONS": {
       "default": "bell",
       "warning": "alert",
@@ -153,6 +154,11 @@
       "success": "check-circle"
     },
     "DEFAULT_SCHEME": "default",
+    "DISMISS_SCHEMES": [
+      "none",
+      "remove",
+      "hide"
+    ],
     "LEGACY_SCHEME_MAPPINGS": {
       "default": "",
       "warning": "flash-warn",

package/static/info_arch.json

@@ -270,11 +270,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 +324,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 +365,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.",
@@ -1626,7 +1704,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 +1752,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."
               }
             ]
           }
@@ -1962,10 +2040,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 +2063,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 +2162,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/banner/dismissable",
-        "name": "dismissable",
+        "preview_path": "primer/alpha/banner/dismissible",
+        "name": "dismissible",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [
@@ -4787,14 +4859,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 +4901,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 +4942,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>",
@@ -14231,6 +14369,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. |"
   }
 ]

package/static/previews.json

@@ -1414,8 +1414,8 @@
         }
       },
       {
-        "preview_path": "primer/alpha/banner/dismissable",
-        "name": "dismissable",
+        "preview_path": "primer/alpha/banner/dismissible",
+        "name": "dismissible",
         "snapshot": "true",
         "skip_rules": {
           "wont_fix": [