@primer/view-components 0.35.0-rc.6c5eafea → 0.35.0-rc.74278fbc

Sign up to get free protection for your applications and to get access to all the features.
Files changed (71) hide show
  1. package/app/assets/javascripts/{app/components → components}/primer/primer.d.ts +3 -3
  2. package/app/assets/javascripts/primer_view_components.js +1 -1
  3. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  4. package/app/assets/styles/primer_view_components.css +1 -1
  5. package/app/assets/styles/primer_view_components.css.map +1 -1
  6. package/app/components/primer/alpha/action_bar_element.js +0 -3
  7. package/app/components/primer/alpha/action_list.css +1 -1
  8. package/app/components/primer/alpha/auto_complete.css +1 -1
  9. package/app/components/primer/alpha/banner.css +1 -1
  10. package/app/components/primer/alpha/dialog.css +1 -1
  11. package/app/components/primer/alpha/dialog.css.json +2 -1
  12. package/app/components/primer/alpha/dropdown.css +1 -1
  13. package/app/components/primer/alpha/select_panel_element.js +7 -1
  14. package/app/components/primer/alpha/stack.css +1 -0
  15. package/app/components/primer/alpha/stack.css.json +90 -0
  16. package/app/components/primer/alpha/stack_item.css +1 -0
  17. package/app/components/primer/alpha/stack_item.css.json +12 -0
  18. package/app/components/primer/alpha/tab_nav.css +1 -1
  19. package/app/components/primer/alpha/text_field.css +1 -1
  20. package/app/components/primer/alpha/toggle_switch.css +1 -1
  21. package/app/components/primer/alpha/underline_nav.css +1 -1
  22. package/app/components/primer/beta/avatar.css +1 -1
  23. package/app/components/primer/beta/avatar_stack.css +1 -1
  24. package/app/components/primer/beta/blankslate.css +1 -1
  25. package/app/components/primer/beta/border_box.css +1 -1
  26. package/app/components/primer/beta/button.css +1 -1
  27. package/app/components/primer/beta/counter.css +1 -1
  28. package/app/components/primer/beta/popover.css +1 -1
  29. package/app/components/primer/beta/progress_bar.css +1 -1
  30. package/app/components/primer/beta/state.css +1 -1
  31. package/app/components/primer/dialog_helper.js +0 -1
  32. package/app/components/primer/primer.d.ts +3 -3
  33. package/app/components/primer/primer.js +3 -3
  34. package/package.json +9 -10
  35. package/static/arguments.json +104 -0
  36. package/static/audited_at.json +2 -0
  37. package/static/classes.json +6 -0
  38. package/static/constants.json +24 -0
  39. package/static/info_arch.json +230 -1
  40. package/static/previews.json +107 -0
  41. package/static/statuses.json +2 -0
  42. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
  43. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
  44. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
  45. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
  46. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
  47. /package/app/assets/javascripts/{app/components → components}/primer/alpha/image_crop.d.ts +0 -0
  48. /package/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
  49. /package/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
  50. /package/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
  51. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
  52. /package/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
  53. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
  54. /package/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
  55. /package/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
  56. /package/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
  57. /package/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
  58. /package/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
  59. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
  60. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
  61. /package/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
  62. /package/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
  63. /package/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
  64. /package/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
  65. /package/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
  66. /package/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
  67. /package/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
  68. /package/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
  69. /package/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
  70. /package/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
  71. /package/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
@@ -1 +1 @@
1
- .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin) solid var(--counter-borderColor);border-radius:2em;color:var(--fgColor-default);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - var(--borderWidth-thin)*2);min-width:var(--base-size-20);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.Counter--secondary{background-color:var(--bgColor-neutral-muted);color:var(--fgColor-muted)}
1
+ .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin) solid var(--counter-borderColor);border-radius:2em;color:var(--fgColor-default);display:inline-block;font-size:var(--text-body-size-small);font-weight:var(--base-text-weight-medium);line-height:calc(var(--base-size-20) - var(--borderWidth-thin)*2);min-width:var(--base-size-20);padding:0 var(--base-size-6);text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.Counter--secondary{background-color:var(--bgColor-neutral-muted);color:var(--fgColor-muted)}
@@ -1 +1 @@
1
- .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:20px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after{right:21px}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:24px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:25px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:24px}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:16px}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after{bottom:17px}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
1
+ .Popover{position:absolute;z-index:100}.Popover-message{background-color:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large))!important;margin-left:auto;margin-right:auto;position:relative;width:232px}.Popover-message:after,.Popover-message:before{content:"";display:inline-block;left:50%;position:absolute}.Popover-message:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default);margin-left:-9px;top:-16px}.Popover-message:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor);margin-left:-8px;top:-14px}.Popover-message--no-caret:after,.Popover-message--no-caret:before{display:none}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after,:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-bottom-color:#0000;top:auto}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):before{border-top-color:var(--borderColor-default);bottom:-16px}:is(.Popover-message--bottom,.Popover-message--bottom-right,.Popover-message--bottom-left):after{border-top-color:var(--overlay-bgColor);bottom:-14px}.Popover-message--bottom-right,.Popover-message--top-right{margin-right:0;right:-9px}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{left:auto;margin-left:0}:is(.Popover-message--top-right,.Popover-message--bottom-right):after,:is(.Popover-message--top-right,.Popover-message--bottom-right):before{right:var(--base-size-20)}.Popover-message--bottom-left,.Popover-message--top-left{left:-9px;margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after,:is(.Popover-message--top-left,.Popover-message--bottom-left):before{left:var(--base-size-24);margin-left:0}:is(.Popover-message--top-left,.Popover-message--bottom-left):after{left:var(--base-size-24)}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after,:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-bottom-color:#0000;left:auto;margin-left:0;top:50%}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{margin-top:-9px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom,.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{margin-top:-8px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):before{border-left-color:var(--borderColor-default);right:-16px}:is(.Popover-message--right,.Popover-message--right-top,.Popover-message--right-bottom):after{border-left-color:var(--overlay-bgColor);right:-14px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):before{border-right-color:var(--borderColor-default);left:-16px}:is(.Popover-message--left,.Popover-message--left-top,.Popover-message--left-bottom):after{border-right-color:var(--overlay-bgColor);left:-14px}:is(.Popover-message--right-top,.Popover-message--left-top):after,:is(.Popover-message--right-top,.Popover-message--left-top):before{top:var(--base-size-24)}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{top:auto}:is(.Popover-message--right-bottom,.Popover-message--left-bottom):after,:is(.Popover-message--right-bottom,.Popover-message--left-bottom):before{bottom:var(--base-size-16)}@media (min-width:544px){.Popover-message--large{min-width:320px}}@media (max-width:767.98px){.Popover{bottom:0!important;left:0!important;position:fixed;right:0!important;top:auto!important}.Popover-message{bottom:auto;left:auto;margin:var(--stack-gap-condensed);right:auto;top:auto;width:auto!important}.Popover-message>.btn-octicon{padding:var(--control-medium-paddingInline-normal)!important}.Popover-message:after,.Popover-message:before{display:none}}
@@ -1 +1 @@
1
- .Progress{background-color:var(--bgColor-neutral-muted);border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}
1
+ .Progress{background-color:var(--bgColor-neutral-muted);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
@@ -1 +1 @@
1
- .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
1
+ .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
@@ -115,7 +115,6 @@ export class DialogHelperElement extends HTMLElement {
115
115
  _DialogHelperElement_abortController = new WeakMap(), _DialogHelperElement_instances = new WeakSet(), _DialogHelperElement_handleDialogOpenAttribute = function _DialogHelperElement_handleDialogOpenAttribute() {
116
116
  if (!this.dialog)
117
117
  return;
118
- this.ownerDocument.body.classList.toggle('has-modal', this.dialog.matches(':modal'));
119
118
  // We don't want to show the Dialog component as non-modal
120
119
  if (this.dialog.matches('[open]:not(:modal)')) {
121
120
  // eslint-disable-next-line no-restricted-syntax
@@ -21,8 +21,8 @@ import './beta/auto_complete/auto_complete';
21
21
  import './beta/clipboard_copy';
22
22
  import './beta/relative_time';
23
23
  import './alpha/tab_container';
24
- import '../../../lib/primer/forms/primer_multi_input';
25
- import '../../../lib/primer/forms/primer_text_field';
26
- import '../../../lib/primer/forms/toggle_switch_input';
24
+ import '../../lib/primer/forms/primer_multi_input';
25
+ import '../../lib/primer/forms/primer_text_field';
26
+ import '../../lib/primer/forms/toggle_switch_input';
27
27
  import './alpha/action_menu/action_menu_element';
28
28
  import './alpha/select_panel_element';
@@ -21,8 +21,8 @@ import './beta/auto_complete/auto_complete';
21
21
  import './beta/clipboard_copy';
22
22
  import './beta/relative_time';
23
23
  import './alpha/tab_container';
24
- import '../../../lib/primer/forms/primer_multi_input';
25
- import '../../../lib/primer/forms/primer_text_field';
26
- import '../../../lib/primer/forms/toggle_switch_input';
24
+ import '../../lib/primer/forms/primer_multi_input';
25
+ import '../../lib/primer/forms/primer_text_field';
26
+ import '../../lib/primer/forms/toggle_switch_input';
27
27
  import './alpha/action_menu/action_menu_element';
28
28
  import './alpha/select_panel_element';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.35.0-rc.6c5eafea",
3
+ "version": "0.35.0-rc.74278fbc",
4
4
  "description": "ViewComponents for the Primer Design System",
5
5
  "main": "app/assets/javascripts/primer_view_components.js",
6
6
  "module": "app/components/primer/primer.js",
@@ -26,15 +26,15 @@
26
26
  "app/components/primer/**/*.css",
27
27
  "app/components/primer/**/*.css.json",
28
28
  "app/components/primer/**/*.d.ts",
29
- "lib/primer/forms/**/*.js",
30
- "lib/primer/forms/**/*.d.ts"
29
+ "app/lib/primer/forms/**/*.js",
30
+ "app/lib/primer/forms/**/*.d.ts"
31
31
  ],
32
32
  "scripts": {
33
33
  "clean": "git clean -fdX -- app/",
34
34
  "prepare": "script/build-assets",
35
35
  "lint": "npm run lint:stylelint && npm run lint:eslint",
36
- "lint:stylelint": "stylelint 'app/components/**/*.pcss'",
37
- "lint:stylelint:fix": "stylelint 'app/components/**/*.pcss' --fix",
36
+ "lint:stylelint": "stylelint --rd -q 'app/components/**/*.pcss'",
37
+ "lint:stylelint:fix": "npm run lint:stylelint -- --fix",
38
38
  "lint:eslint": "eslint 'app/components/**/*.ts'",
39
39
  "lint:eslint:fix": "eslint 'app/components/**/*.ts' --fix",
40
40
  "changeset:version": "changeset version && script/version",
@@ -64,9 +64,9 @@
64
64
  "@github/markdownlint-github": "^0.6.0",
65
65
  "@github/prettier-config": "0.0.6",
66
66
  "@playwright/test": "^1.35.1",
67
- "@primer/css": "21.3.6",
67
+ "@primer/css": "21.5.0",
68
68
  "@primer/primitives": "^9.0.2",
69
- "@primer/stylelint-config": "^12.7.2",
69
+ "@primer/stylelint-config": "^13.1.1",
70
70
  "@rollup/plugin-node-resolve": "^15.2.3",
71
71
  "@rollup/plugin-typescript": "^8.3.3",
72
72
  "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -84,13 +84,12 @@
84
84
  "postcss": "^8.4.16",
85
85
  "postcss-cli": "^11.0.0",
86
86
  "postcss-import": "^16.0.0",
87
- "postcss-mixins": "^10.0.0",
87
+ "postcss-mixins": "^11.0.1",
88
88
  "postcss-preset-env": "^10.0.2",
89
89
  "prettier": "^3.3.2",
90
90
  "rollup": "^2.79.1",
91
91
  "rollup-plugin-terser": "^7.0.2",
92
- "stylelint": "^16.1.0",
93
- "stylelint-config-standard": "^36.0.0",
92
+ "stylelint-actions-formatters": "^16.3.1",
94
93
  "tslib": "^2.4.0",
95
94
  "typescript": "^5.2.2",
96
95
  "vite": "^5.4.3",
@@ -974,6 +974,12 @@
974
974
  "default": "`false`",
975
975
  "description": "If true will hide the heading title, while still making it available to Screen Readers."
976
976
  },
977
+ {
978
+ "name": "disable_scroll",
979
+ "type": "Boolean",
980
+ "default": "`true`",
981
+ "description": "When true, disables scrolling the page when the dialog is open."
982
+ },
977
983
  {
978
984
  "name": "system_arguments",
979
985
  "type": "Hash",
@@ -2468,6 +2474,18 @@
2468
2474
  "default": "`:outside_bottom`",
2469
2475
  "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
2470
2476
  },
2477
+ {
2478
+ "name": "loading_label",
2479
+ "type": "String",
2480
+ "default": "`\"Loading content...\"`",
2481
+ "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
2482
+ },
2483
+ {
2484
+ "name": "loading_description",
2485
+ "type": "String",
2486
+ "default": "`nil`",
2487
+ "description": "The description to use when the panel is loading. If not provided, no description will be used."
2488
+ },
2471
2489
  {
2472
2490
  "name": "banner_scheme",
2473
2491
  "type": "Symbol",
@@ -2498,6 +2516,92 @@
2498
2516
  }
2499
2517
  ]
2500
2518
  },
2519
+ {
2520
+ "component": "Stack",
2521
+ "status": "alpha",
2522
+ "a11y_reviewed": false,
2523
+ "short_name": "Stack",
2524
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
2525
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
2526
+ "parameters": [
2527
+ {
2528
+ "name": "tag",
2529
+ "type": "Symbol",
2530
+ "default": "`:div`",
2531
+ "description": "Customize the element type of the rendered container."
2532
+ },
2533
+ {
2534
+ "name": "gap",
2535
+ "type": "Symbol",
2536
+ "default": "`GapArg::DEFAULT`",
2537
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
2538
+ },
2539
+ {
2540
+ "name": "direction",
2541
+ "type": "Symbol",
2542
+ "default": "`:vertical`",
2543
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
2544
+ },
2545
+ {
2546
+ "name": "align",
2547
+ "type": "Symbol",
2548
+ "default": "`:stretch`",
2549
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
2550
+ },
2551
+ {
2552
+ "name": "wrap",
2553
+ "type": "Symbol",
2554
+ "default": "`:nowrap`",
2555
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
2556
+ },
2557
+ {
2558
+ "name": "justify",
2559
+ "type": "Symbol",
2560
+ "default": "`:start`",
2561
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
2562
+ },
2563
+ {
2564
+ "name": "padding",
2565
+ "type": "Symbol",
2566
+ "default": "`:none`",
2567
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
2568
+ },
2569
+ {
2570
+ "name": "system_arguments",
2571
+ "type": "Hash",
2572
+ "default": "N/A",
2573
+ "description": "[System arguments](/system-arguments)"
2574
+ }
2575
+ ]
2576
+ },
2577
+ {
2578
+ "component": "StackItem",
2579
+ "status": "alpha",
2580
+ "a11y_reviewed": false,
2581
+ "short_name": "StackItem",
2582
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
2583
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
2584
+ "parameters": [
2585
+ {
2586
+ "name": "tag",
2587
+ "type": "Symbol",
2588
+ "default": "`:div`",
2589
+ "description": "Customize the element type of the rendered container."
2590
+ },
2591
+ {
2592
+ "name": "grow",
2593
+ "type": "Boolean",
2594
+ "default": "`false`",
2595
+ "description": "Allow item to keep size or expand to fill the available space."
2596
+ },
2597
+ {
2598
+ "name": "system_arguments",
2599
+ "type": "Hash",
2600
+ "default": "N/A",
2601
+ "description": "[System arguments](/system-arguments)"
2602
+ }
2603
+ ]
2604
+ },
2501
2605
  {
2502
2606
  "component": "SubmitButton",
2503
2607
  "status": "alpha",
@@ -54,6 +54,8 @@
54
54
  "Primer::Alpha::Select": "",
55
55
  "Primer::Alpha::SelectPanel": "",
56
56
  "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
57
+ "Primer::Alpha::Stack": "",
58
+ "Primer::Alpha::StackItem": "",
57
59
  "Primer::Alpha::SubmitButton": "",
58
60
  "Primer::Alpha::TabContainer": "",
59
61
  "Primer::Alpha::TabNav": "",
@@ -501,6 +501,12 @@
501
501
  "SelectPanel-loadingPanel": [
502
502
  "Primer::Alpha::SelectPanel"
503
503
  ],
504
+ "Stack": [
505
+ "Primer::Alpha::Stack"
506
+ ],
507
+ "StackItem": [
508
+ "Primer::Alpha::StackItem"
509
+ ],
504
510
  "State": [
505
511
  "Primer::Beta::State"
506
512
  ],
@@ -621,6 +621,30 @@
621
621
  },
622
622
  "Primer::Alpha::SelectPanel::ItemList": {
623
623
  },
624
+ "Primer::Alpha::Stack": {
625
+ "ARG_CLASSES": [
626
+ "Primer::Alpha::Stack::JustifyArg",
627
+ "Primer::Alpha::Stack::DirectionArg",
628
+ "Primer::Alpha::Stack::AlignArg",
629
+ "Primer::Alpha::Stack::WrapArg",
630
+ "Primer::Alpha::Stack::PaddingArg",
631
+ "Primer::Alpha::Stack::GapArg"
632
+ ],
633
+ "AlignArg": "Primer::Alpha::Stack::AlignArg",
634
+ "DEFAULT_TAG": "div",
635
+ "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
636
+ "GapArg": "Primer::Alpha::Stack::GapArg",
637
+ "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
638
+ "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
639
+ "WrapArg": "Primer::Alpha::Stack::WrapArg"
640
+ },
641
+ "Primer::Alpha::StackItem": {
642
+ "ARG_CLASSES": [
643
+ "Primer::Alpha::StackItem::GrowArg"
644
+ ],
645
+ "DEFAULT_TAG": "div",
646
+ "GrowArg": "Primer::Alpha::StackItem::GrowArg"
647
+ },
624
648
  "Primer::Alpha::SubmitButton": {
625
649
  },
626
650
  "Primer::Alpha::TabContainer": {
@@ -3306,6 +3306,12 @@
3306
3306
  "default": "`false`",
3307
3307
  "description": "If true will hide the heading title, while still making it available to Screen Readers."
3308
3308
  },
3309
+ {
3310
+ "name": "disable_scroll",
3311
+ "type": "Boolean",
3312
+ "default": "`true`",
3313
+ "description": "When true, disables scrolling the page when the dialog is open."
3314
+ },
3309
3315
  {
3310
3316
  "name": "system_arguments",
3311
3317
  "type": "Hash",
@@ -7653,6 +7659,18 @@
7653
7659
  "default": "`:outside_bottom`",
7654
7660
  "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
7655
7661
  },
7662
+ {
7663
+ "name": "loading_label",
7664
+ "type": "String",
7665
+ "default": "`\"Loading content...\"`",
7666
+ "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
7667
+ },
7668
+ {
7669
+ "name": "loading_description",
7670
+ "type": "String",
7671
+ "default": "`nil`",
7672
+ "description": "The description to use when the panel is loading. If not provided, no description will be used."
7673
+ },
7656
7674
  {
7657
7675
  "name": "banner_scheme",
7658
7676
  "type": "Symbol",
@@ -7901,6 +7919,32 @@
7901
7919
  ]
7902
7920
  }
7903
7921
  },
7922
+ {
7923
+ "preview_path": "primer/alpha/select_panel/custom_loading_label",
7924
+ "name": "custom_loading_label",
7925
+ "snapshot": "interactive",
7926
+ "skip_rules": {
7927
+ "wont_fix": [
7928
+ "region"
7929
+ ],
7930
+ "will_fix": [
7931
+ "color-contrast"
7932
+ ]
7933
+ }
7934
+ },
7935
+ {
7936
+ "preview_path": "primer/alpha/select_panel/custom_loading_description",
7937
+ "name": "custom_loading_description",
7938
+ "snapshot": "interactive",
7939
+ "skip_rules": {
7940
+ "wont_fix": [
7941
+ "region"
7942
+ ],
7943
+ "will_fix": [
7944
+ "color-contrast"
7945
+ ]
7946
+ }
7947
+ },
7904
7948
  {
7905
7949
  "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
7906
7950
  "name": "local_fetch_no_results",
@@ -8147,6 +8191,19 @@
8147
8191
  "color-contrast"
8148
8192
  ]
8149
8193
  }
8194
+ },
8195
+ {
8196
+ "preview_path": "primer/alpha/select_panel/scroll_container",
8197
+ "name": "scroll_container",
8198
+ "snapshot": "false",
8199
+ "skip_rules": {
8200
+ "wont_fix": [
8201
+ "region"
8202
+ ],
8203
+ "will_fix": [
8204
+ "color-contrast"
8205
+ ]
8206
+ }
8150
8207
  }
8151
8208
  ],
8152
8209
  "subcomponents": [
@@ -8210,6 +8267,178 @@
8210
8267
  }
8211
8268
  ]
8212
8269
  },
8270
+ {
8271
+ "fully_qualified_name": "Primer::Alpha::Stack",
8272
+ "description": "Stack is a layout component that creates responsive horizontal and vertical flows.",
8273
+ "accessibility_docs": null,
8274
+ "is_form_component": false,
8275
+ "is_published": true,
8276
+ "requires_js": false,
8277
+ "component": "Stack",
8278
+ "status": "alpha",
8279
+ "a11y_reviewed": false,
8280
+ "short_name": "Stack",
8281
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
8282
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
8283
+ "parameters": [
8284
+ {
8285
+ "name": "tag",
8286
+ "type": "Symbol",
8287
+ "default": "`:div`",
8288
+ "description": "Customize the element type of the rendered container."
8289
+ },
8290
+ {
8291
+ "name": "gap",
8292
+ "type": "Symbol",
8293
+ "default": "`GapArg::DEFAULT`",
8294
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
8295
+ },
8296
+ {
8297
+ "name": "direction",
8298
+ "type": "Symbol",
8299
+ "default": "`:vertical`",
8300
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
8301
+ },
8302
+ {
8303
+ "name": "align",
8304
+ "type": "Symbol",
8305
+ "default": "`:stretch`",
8306
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
8307
+ },
8308
+ {
8309
+ "name": "wrap",
8310
+ "type": "Symbol",
8311
+ "default": "`:nowrap`",
8312
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
8313
+ },
8314
+ {
8315
+ "name": "justify",
8316
+ "type": "Symbol",
8317
+ "default": "`:start`",
8318
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
8319
+ },
8320
+ {
8321
+ "name": "padding",
8322
+ "type": "Symbol",
8323
+ "default": "`:none`",
8324
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
8325
+ },
8326
+ {
8327
+ "name": "system_arguments",
8328
+ "type": "Hash",
8329
+ "default": "N/A",
8330
+ "description": "{{link_to_system_arguments_docs}}"
8331
+ }
8332
+ ],
8333
+ "slots": [
8334
+
8335
+ ],
8336
+ "methods": [
8337
+
8338
+ ],
8339
+ "previews": [
8340
+ {
8341
+ "preview_path": "primer/alpha/stack/default",
8342
+ "name": "default",
8343
+ "snapshot": "false",
8344
+ "skip_rules": {
8345
+ "wont_fix": [
8346
+ "region"
8347
+ ],
8348
+ "will_fix": [
8349
+ "color-contrast"
8350
+ ]
8351
+ }
8352
+ },
8353
+ {
8354
+ "preview_path": "primer/alpha/stack/playground",
8355
+ "name": "playground",
8356
+ "snapshot": "false",
8357
+ "skip_rules": {
8358
+ "wont_fix": [
8359
+ "region"
8360
+ ],
8361
+ "will_fix": [
8362
+ "color-contrast"
8363
+ ]
8364
+ }
8365
+ }
8366
+ ],
8367
+ "subcomponents": [
8368
+
8369
+ ]
8370
+ },
8371
+ {
8372
+ "fully_qualified_name": "Primer::Alpha::StackItem",
8373
+ "description": "StackItem is a layout component designed to be used as the child of a Stack.",
8374
+ "accessibility_docs": null,
8375
+ "is_form_component": false,
8376
+ "is_published": true,
8377
+ "requires_js": false,
8378
+ "component": "StackItem",
8379
+ "status": "alpha",
8380
+ "a11y_reviewed": false,
8381
+ "short_name": "StackItem",
8382
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
8383
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
8384
+ "parameters": [
8385
+ {
8386
+ "name": "tag",
8387
+ "type": "Symbol",
8388
+ "default": "`:div`",
8389
+ "description": "Customize the element type of the rendered container."
8390
+ },
8391
+ {
8392
+ "name": "grow",
8393
+ "type": "Boolean",
8394
+ "default": "`false`",
8395
+ "description": "Allow item to keep size or expand to fill the available space."
8396
+ },
8397
+ {
8398
+ "name": "system_arguments",
8399
+ "type": "Hash",
8400
+ "default": "N/A",
8401
+ "description": "{{link_to_system_arguments_docs}}"
8402
+ }
8403
+ ],
8404
+ "slots": [
8405
+
8406
+ ],
8407
+ "methods": [
8408
+
8409
+ ],
8410
+ "previews": [
8411
+ {
8412
+ "preview_path": "primer/alpha/stack_item/default",
8413
+ "name": "default",
8414
+ "snapshot": "false",
8415
+ "skip_rules": {
8416
+ "wont_fix": [
8417
+ "region"
8418
+ ],
8419
+ "will_fix": [
8420
+ "color-contrast"
8421
+ ]
8422
+ }
8423
+ },
8424
+ {
8425
+ "preview_path": "primer/alpha/stack_item/playground",
8426
+ "name": "playground",
8427
+ "snapshot": "false",
8428
+ "skip_rules": {
8429
+ "wont_fix": [
8430
+ "region"
8431
+ ],
8432
+ "will_fix": [
8433
+ "color-contrast"
8434
+ ]
8435
+ }
8436
+ }
8437
+ ],
8438
+ "subcomponents": [
8439
+
8440
+ ]
8441
+ },
8213
8442
  {
8214
8443
  "fully_qualified_name": "Primer::Alpha::SubmitButton",
8215
8444
  "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.",
@@ -17254,6 +17483,6 @@
17254
17483
  "component": "BaseComponent",
17255
17484
  "fully_qualified_name": "Primer::BaseComponent",
17256
17485
  "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
17257
- "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding 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. |"
17486
+ "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding top. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
17258
17487
  }
17259
17488
  ]