@primer/view-components 0.35.0-rc.300b5a03 → 0.35.0-rc.3e3b8771

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) 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/dropdown.css +1 -1
  11. package/app/components/primer/alpha/select_panel_element.js +7 -1
  12. package/app/components/primer/alpha/stack.css +1 -0
  13. package/app/components/primer/alpha/stack.css.json +90 -0
  14. package/app/components/primer/alpha/stack_item.css +1 -0
  15. package/app/components/primer/alpha/stack_item.css.json +12 -0
  16. package/app/components/primer/alpha/tab_nav.css +1 -1
  17. package/app/components/primer/alpha/text_field.css +1 -1
  18. package/app/components/primer/alpha/toggle_switch.css +1 -1
  19. package/app/components/primer/alpha/underline_nav.css +1 -1
  20. package/app/components/primer/beta/avatar.css +1 -1
  21. package/app/components/primer/beta/avatar_stack.css +1 -1
  22. package/app/components/primer/beta/blankslate.css +1 -1
  23. package/app/components/primer/beta/border_box.css +1 -1
  24. package/app/components/primer/beta/button.css +1 -1
  25. package/app/components/primer/beta/counter.css +1 -1
  26. package/app/components/primer/beta/popover.css +1 -1
  27. package/app/components/primer/beta/progress_bar.css +1 -1
  28. package/app/components/primer/beta/state.css +1 -1
  29. package/app/components/primer/primer.js +3 -3
  30. package/app/lib/primer/forms/primer_multi_input.d.ts +10 -0
  31. package/app/lib/primer/forms/primer_text_field.d.ts +28 -0
  32. package/app/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  33. package/package.json +6 -5
  34. package/static/arguments.json +106 -2
  35. package/static/audited_at.json +2 -0
  36. package/static/classes.json +6 -0
  37. package/static/constants.json +29 -0
  38. package/static/info_arch.json +229 -3
  39. package/static/previews.json +94 -0
  40. package/static/statuses.json +2 -0
  41. package/app/components/primer/alpha/action_bar_element.d.ts +0 -17
  42. package/app/components/primer/alpha/action_list.d.ts +0 -16
  43. package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -42
  44. package/app/components/primer/alpha/dropdown/menu.d.ts +0 -1
  45. package/app/components/primer/alpha/dropdown.d.ts +0 -1
  46. package/app/components/primer/alpha/image_crop.d.ts +0 -1
  47. package/app/components/primer/alpha/modal_dialog.d.ts +0 -18
  48. package/app/components/primer/alpha/segmented_control.d.ts +0 -12
  49. package/app/components/primer/alpha/select_panel_element.d.ts +0 -63
  50. package/app/components/primer/alpha/tab_container.d.ts +0 -1
  51. package/app/components/primer/alpha/toggle_switch.d.ts +0 -34
  52. package/app/components/primer/alpha/tool_tip.d.ts +0 -27
  53. package/app/components/primer/alpha/x_banner.d.ts +0 -18
  54. package/app/components/primer/anchored_position.d.ts +0 -27
  55. package/app/components/primer/aria_live.d.ts +0 -8
  56. package/app/components/primer/beta/auto_complete/auto_complete.d.ts +0 -1
  57. package/app/components/primer/beta/clipboard_copy.d.ts +0 -1
  58. package/app/components/primer/beta/nav_list.d.ts +0 -20
  59. package/app/components/primer/beta/nav_list_group_element.d.ts +0 -19
  60. package/app/components/primer/beta/relative_time.d.ts +0 -1
  61. package/app/components/primer/dialog_helper.d.ts +0 -15
  62. package/app/components/primer/focus_group.d.ts +0 -19
  63. package/app/components/primer/primer.d.ts +0 -28
  64. package/app/components/primer/scrollable_region.d.ts +0 -13
  65. package/app/components/primer/shared_events.d.ts +0 -11
  66. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_bar_element.d.ts +0 -0
  67. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_list.d.ts +0 -0
  68. /package/app/assets/javascripts/{app/components → components}/primer/alpha/action_menu/action_menu_element.d.ts +0 -0
  69. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown/menu.d.ts +0 -0
  70. /package/app/assets/javascripts/{app/components → components}/primer/alpha/dropdown.d.ts +0 -0
  71. /package/app/assets/javascripts/{app/components → components}/primer/alpha/image_crop.d.ts +0 -0
  72. /package/app/assets/javascripts/{app/components → components}/primer/alpha/modal_dialog.d.ts +0 -0
  73. /package/app/assets/javascripts/{app/components → components}/primer/alpha/segmented_control.d.ts +0 -0
  74. /package/app/assets/javascripts/{app/components → components}/primer/alpha/select_panel_element.d.ts +0 -0
  75. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tab_container.d.ts +0 -0
  76. /package/app/assets/javascripts/{app/components → components}/primer/alpha/toggle_switch.d.ts +0 -0
  77. /package/app/assets/javascripts/{app/components → components}/primer/alpha/tool_tip.d.ts +0 -0
  78. /package/app/assets/javascripts/{app/components → components}/primer/alpha/x_banner.d.ts +0 -0
  79. /package/app/assets/javascripts/{app/components → components}/primer/anchored_position.d.ts +0 -0
  80. /package/app/assets/javascripts/{app/components → components}/primer/aria_live.d.ts +0 -0
  81. /package/app/assets/javascripts/{app/components → components}/primer/beta/auto_complete/auto_complete.d.ts +0 -0
  82. /package/app/assets/javascripts/{app/components → components}/primer/beta/clipboard_copy.d.ts +0 -0
  83. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list.d.ts +0 -0
  84. /package/app/assets/javascripts/{app/components → components}/primer/beta/nav_list_group_element.d.ts +0 -0
  85. /package/app/assets/javascripts/{app/components → components}/primer/beta/relative_time.d.ts +0 -0
  86. /package/app/assets/javascripts/{app/components → components}/primer/dialog_helper.d.ts +0 -0
  87. /package/app/assets/javascripts/{app/components → components}/primer/focus_group.d.ts +0 -0
  88. /package/app/assets/javascripts/{app/components → components}/primer/scrollable_region.d.ts +0 -0
  89. /package/app/assets/javascripts/{app/components → components}/primer/shared_events.d.ts +0 -0
  90. /package/{lib → app/lib}/primer/forms/primer_multi_input.js +0 -0
  91. /package/{lib → app/lib}/primer/forms/primer_text_field.js +0 -0
  92. /package/{lib → app/lib}/primer/forms/toggle_switch_input.js +0 -0
@@ -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';
@@ -0,0 +1,10 @@
1
+ export declare class PrimerMultiInputElement extends HTMLElement {
2
+ fields: HTMLInputElement[];
3
+ activateField(name: string): void;
4
+ private findField;
5
+ }
6
+ declare global {
7
+ interface Window {
8
+ PrimerMultiInputElement: typeof PrimerMultiInputElement;
9
+ }
10
+ }
@@ -0,0 +1,28 @@
1
+ import '@github/auto-check-element';
2
+ import type { AutoCheckErrorEvent, AutoCheckSuccessEvent } from '@github/auto-check-element';
3
+ declare global {
4
+ interface HTMLElementEventMap {
5
+ 'auto-check-success': AutoCheckSuccessEvent;
6
+ 'auto-check-error': AutoCheckErrorEvent;
7
+ }
8
+ }
9
+ export declare class PrimerTextFieldElement extends HTMLElement {
10
+ #private;
11
+ inputElement: HTMLInputElement;
12
+ validationElement: HTMLElement;
13
+ validationMessageElement: HTMLElement;
14
+ validationSuccessIcon: HTMLElement;
15
+ validationErrorIcon: HTMLElement;
16
+ leadingVisual: HTMLElement;
17
+ leadingSpinner: HTMLElement;
18
+ connectedCallback(): void;
19
+ disconnectedCallback(): void;
20
+ clearContents(): void;
21
+ clearError(): void;
22
+ setValidationMessage(message: string): void;
23
+ toggleValidationStyling(isError: boolean): void;
24
+ setSuccess(message: string): void;
25
+ setError(message: string): void;
26
+ showLeadingSpinner(): void;
27
+ hideLeadingSpinner(): void;
28
+ }
@@ -0,0 +1,5 @@
1
+ export declare class ToggleSwitchInputElement extends HTMLElement {
2
+ validationElement: HTMLElement;
3
+ validationMessageElement: HTMLElement;
4
+ connectedCallback(): void;
5
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.35.0-rc.300b5a03",
3
+ "version": "0.35.0-rc.3e3b8771",
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,6 +26,8 @@
26
26
  "app/components/primer/**/*.css",
27
27
  "app/components/primer/**/*.css.json",
28
28
  "app/components/primer/**/*.d.ts",
29
+ "app/lib/primer/forms/**/*.js",
30
+ "app/lib/primer/forms/**/*.d.ts",
29
31
  "lib/primer/forms/**/*.js",
30
32
  "lib/primer/forms/**/*.d.ts"
31
33
  ],
@@ -66,7 +68,7 @@
66
68
  "@playwright/test": "^1.35.1",
67
69
  "@primer/css": "21.3.6",
68
70
  "@primer/primitives": "^9.0.2",
69
- "@primer/stylelint-config": "^12.7.2",
71
+ "@primer/stylelint-config": "^13.0.1",
70
72
  "@rollup/plugin-node-resolve": "^15.2.3",
71
73
  "@rollup/plugin-typescript": "^8.3.3",
72
74
  "@typescript-eslint/eslint-plugin": "^7.0.1",
@@ -84,13 +86,12 @@
84
86
  "postcss": "^8.4.16",
85
87
  "postcss-cli": "^11.0.0",
86
88
  "postcss-import": "^16.0.0",
87
- "postcss-mixins": "^10.0.0",
89
+ "postcss-mixins": "^11.0.1",
88
90
  "postcss-preset-env": "^10.0.2",
89
91
  "prettier": "^3.3.2",
90
92
  "rollup": "^2.79.1",
91
93
  "rollup-plugin-terser": "^7.0.2",
92
- "stylelint": "^16.1.0",
93
- "stylelint-config-standard": "^36.0.0",
94
+ "stylelint-actions-formatters": "^16.3.1",
94
95
  "tslib": "^2.4.0",
95
96
  "typescript": "^5.2.2",
96
97
  "vite": "^5.4.3",
@@ -108,7 +108,7 @@
108
108
  "name": "aria_selection_variant",
109
109
  "type": "Symbol",
110
110
  "default": "`:checked`",
111
- "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
111
+ "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
112
112
  },
113
113
  {
114
114
  "name": "form_arguments",
@@ -451,7 +451,7 @@
451
451
  "name": "aria_selection_variant",
452
452
  "type": "Symbol",
453
453
  "default": "`:checked`",
454
- "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
454
+ "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
455
455
  },
456
456
  {
457
457
  "name": "form_arguments",
@@ -2468,6 +2468,24 @@
2468
2468
  "default": "`:outside_bottom`",
2469
2469
  "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
2470
  },
2471
+ {
2472
+ "name": "loading_label",
2473
+ "type": "String",
2474
+ "default": "`\"Loading content...\"`",
2475
+ "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
2476
+ },
2477
+ {
2478
+ "name": "loading_description",
2479
+ "type": "String",
2480
+ "default": "`nil`",
2481
+ "description": "The description to use when the panel is loading. If not provided, no description will be used."
2482
+ },
2483
+ {
2484
+ "name": "banner_scheme",
2485
+ "type": "Symbol",
2486
+ "default": "`:danger`",
2487
+ "description": "The scheme for the error banner One of `:danger` or `:warning`."
2488
+ },
2471
2489
  {
2472
2490
  "name": "system_arguments",
2473
2491
  "type": "Hash",
@@ -2492,6 +2510,92 @@
2492
2510
  }
2493
2511
  ]
2494
2512
  },
2513
+ {
2514
+ "component": "Stack",
2515
+ "status": "alpha",
2516
+ "a11y_reviewed": false,
2517
+ "short_name": "Stack",
2518
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
2519
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
2520
+ "parameters": [
2521
+ {
2522
+ "name": "tag",
2523
+ "type": "Symbol",
2524
+ "default": "`:div`",
2525
+ "description": "Customize the element type of the rendered container."
2526
+ },
2527
+ {
2528
+ "name": "gap",
2529
+ "type": "Symbol",
2530
+ "default": "`GapArg::DEFAULT`",
2531
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
2532
+ },
2533
+ {
2534
+ "name": "direction",
2535
+ "type": "Symbol",
2536
+ "default": "`:vertical`",
2537
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
2538
+ },
2539
+ {
2540
+ "name": "align",
2541
+ "type": "Symbol",
2542
+ "default": "`:stretch`",
2543
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
2544
+ },
2545
+ {
2546
+ "name": "wrap",
2547
+ "type": "Symbol",
2548
+ "default": "`:nowrap`",
2549
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
2550
+ },
2551
+ {
2552
+ "name": "justify",
2553
+ "type": "Symbol",
2554
+ "default": "`:start`",
2555
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
2556
+ },
2557
+ {
2558
+ "name": "padding",
2559
+ "type": "Symbol",
2560
+ "default": "`:none`",
2561
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
2562
+ },
2563
+ {
2564
+ "name": "system_arguments",
2565
+ "type": "Hash",
2566
+ "default": "N/A",
2567
+ "description": "[System arguments](/system-arguments)"
2568
+ }
2569
+ ]
2570
+ },
2571
+ {
2572
+ "component": "StackItem",
2573
+ "status": "alpha",
2574
+ "a11y_reviewed": false,
2575
+ "short_name": "StackItem",
2576
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
2577
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
2578
+ "parameters": [
2579
+ {
2580
+ "name": "tag",
2581
+ "type": "Symbol",
2582
+ "default": "`:div`",
2583
+ "description": "Customize the element type of the rendered container."
2584
+ },
2585
+ {
2586
+ "name": "grow",
2587
+ "type": "Boolean",
2588
+ "default": "`false`",
2589
+ "description": "Allow item to keep size or expand to fill the available space."
2590
+ },
2591
+ {
2592
+ "name": "system_arguments",
2593
+ "type": "Hash",
2594
+ "default": "N/A",
2595
+ "description": "[System arguments](/system-arguments)"
2596
+ }
2597
+ ]
2598
+ },
2495
2599
  {
2496
2600
  "component": "SubmitButton",
2497
2601
  "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
  ],
@@ -598,6 +598,11 @@
598
598
  "Primer::Alpha::Select": {
599
599
  },
600
600
  "Primer::Alpha::SelectPanel": {
601
+ "BANNER_SCHEME_OPTIONS": [
602
+ "danger",
603
+ "warning"
604
+ ],
605
+ "DEFAULT_BANNER_SCHEME": "danger",
601
606
  "DEFAULT_FETCH_STRATEGY": "remote",
602
607
  "DEFAULT_PRELOAD": false,
603
608
  "DEFAULT_SELECT_VARIANT": "single",
@@ -616,6 +621,30 @@
616
621
  },
617
622
  "Primer::Alpha::SelectPanel::ItemList": {
618
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
+ },
619
648
  "Primer::Alpha::SubmitButton": {
620
649
  },
621
650
  "Primer::Alpha::TabContainer": {
@@ -250,7 +250,7 @@
250
250
  "name": "aria_selection_variant",
251
251
  "type": "Symbol",
252
252
  "default": "`:checked`",
253
- "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
253
+ "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
254
254
  },
255
255
  {
256
256
  "name": "form_arguments",
@@ -2102,7 +2102,7 @@
2102
2102
  "name": "aria_selection_variant",
2103
2103
  "type": "Symbol",
2104
2104
  "default": "`:checked`",
2105
- "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
2105
+ "description": "Specifies which aria selection to use. One of `:checked` or `:selected`."
2106
2106
  },
2107
2107
  {
2108
2108
  "name": "form_arguments",
@@ -7653,6 +7653,24 @@
7653
7653
  "default": "`:outside_bottom`",
7654
7654
  "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
7655
  },
7656
+ {
7657
+ "name": "loading_label",
7658
+ "type": "String",
7659
+ "default": "`\"Loading content...\"`",
7660
+ "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
7661
+ },
7662
+ {
7663
+ "name": "loading_description",
7664
+ "type": "String",
7665
+ "default": "`nil`",
7666
+ "description": "The description to use when the panel is loading. If not provided, no description will be used."
7667
+ },
7668
+ {
7669
+ "name": "banner_scheme",
7670
+ "type": "Symbol",
7671
+ "default": "`:danger`",
7672
+ "description": "The scheme for the error banner One of `:danger` or `:warning`."
7673
+ },
7656
7674
  {
7657
7675
  "name": "system_arguments",
7658
7676
  "type": "Hash",
@@ -7753,6 +7771,16 @@
7753
7771
  "Symbol"
7754
7772
  ]
7755
7773
  },
7774
+ {
7775
+ "name": "banner_scheme",
7776
+ "description": "One of `:danger` or `:warning`.",
7777
+ "parameters": [
7778
+
7779
+ ],
7780
+ "return_types": [
7781
+ "Symbol"
7782
+ ]
7783
+ },
7756
7784
  {
7757
7785
  "name": "fetch_strategy",
7758
7786
  "description": "One of `:eventually_local`, `:local`, or `:remote`.",
@@ -7885,6 +7913,32 @@
7885
7913
  ]
7886
7914
  }
7887
7915
  },
7916
+ {
7917
+ "preview_path": "primer/alpha/select_panel/custom_loading_label",
7918
+ "name": "custom_loading_label",
7919
+ "snapshot": "interactive",
7920
+ "skip_rules": {
7921
+ "wont_fix": [
7922
+ "region"
7923
+ ],
7924
+ "will_fix": [
7925
+ "color-contrast"
7926
+ ]
7927
+ }
7928
+ },
7929
+ {
7930
+ "preview_path": "primer/alpha/select_panel/custom_loading_description",
7931
+ "name": "custom_loading_description",
7932
+ "snapshot": "interactive",
7933
+ "skip_rules": {
7934
+ "wont_fix": [
7935
+ "region"
7936
+ ],
7937
+ "will_fix": [
7938
+ "color-contrast"
7939
+ ]
7940
+ }
7941
+ },
7888
7942
  {
7889
7943
  "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
7890
7944
  "name": "local_fetch_no_results",
@@ -8194,6 +8248,178 @@
8194
8248
  }
8195
8249
  ]
8196
8250
  },
8251
+ {
8252
+ "fully_qualified_name": "Primer::Alpha::Stack",
8253
+ "description": "Stack is a layout component that creates responsive horizontal and vertical flows.",
8254
+ "accessibility_docs": null,
8255
+ "is_form_component": false,
8256
+ "is_published": true,
8257
+ "requires_js": false,
8258
+ "component": "Stack",
8259
+ "status": "alpha",
8260
+ "a11y_reviewed": false,
8261
+ "short_name": "Stack",
8262
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
8263
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
8264
+ "parameters": [
8265
+ {
8266
+ "name": "tag",
8267
+ "type": "Symbol",
8268
+ "default": "`:div`",
8269
+ "description": "Customize the element type of the rendered container."
8270
+ },
8271
+ {
8272
+ "name": "gap",
8273
+ "type": "Symbol",
8274
+ "default": "`GapArg::DEFAULT`",
8275
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
8276
+ },
8277
+ {
8278
+ "name": "direction",
8279
+ "type": "Symbol",
8280
+ "default": "`:vertical`",
8281
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
8282
+ },
8283
+ {
8284
+ "name": "align",
8285
+ "type": "Symbol",
8286
+ "default": "`:stretch`",
8287
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
8288
+ },
8289
+ {
8290
+ "name": "wrap",
8291
+ "type": "Symbol",
8292
+ "default": "`:nowrap`",
8293
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
8294
+ },
8295
+ {
8296
+ "name": "justify",
8297
+ "type": "Symbol",
8298
+ "default": "`:start`",
8299
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
8300
+ },
8301
+ {
8302
+ "name": "padding",
8303
+ "type": "Symbol",
8304
+ "default": "`:none`",
8305
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
8306
+ },
8307
+ {
8308
+ "name": "system_arguments",
8309
+ "type": "Hash",
8310
+ "default": "N/A",
8311
+ "description": "{{link_to_system_arguments_docs}}"
8312
+ }
8313
+ ],
8314
+ "slots": [
8315
+
8316
+ ],
8317
+ "methods": [
8318
+
8319
+ ],
8320
+ "previews": [
8321
+ {
8322
+ "preview_path": "primer/alpha/stack/default",
8323
+ "name": "default",
8324
+ "snapshot": "false",
8325
+ "skip_rules": {
8326
+ "wont_fix": [
8327
+ "region"
8328
+ ],
8329
+ "will_fix": [
8330
+ "color-contrast"
8331
+ ]
8332
+ }
8333
+ },
8334
+ {
8335
+ "preview_path": "primer/alpha/stack/playground",
8336
+ "name": "playground",
8337
+ "snapshot": "false",
8338
+ "skip_rules": {
8339
+ "wont_fix": [
8340
+ "region"
8341
+ ],
8342
+ "will_fix": [
8343
+ "color-contrast"
8344
+ ]
8345
+ }
8346
+ }
8347
+ ],
8348
+ "subcomponents": [
8349
+
8350
+ ]
8351
+ },
8352
+ {
8353
+ "fully_qualified_name": "Primer::Alpha::StackItem",
8354
+ "description": "StackItem is a layout component designed to be used as the child of a Stack.",
8355
+ "accessibility_docs": null,
8356
+ "is_form_component": false,
8357
+ "is_published": true,
8358
+ "requires_js": false,
8359
+ "component": "StackItem",
8360
+ "status": "alpha",
8361
+ "a11y_reviewed": false,
8362
+ "short_name": "StackItem",
8363
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
8364
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
8365
+ "parameters": [
8366
+ {
8367
+ "name": "tag",
8368
+ "type": "Symbol",
8369
+ "default": "`:div`",
8370
+ "description": "Customize the element type of the rendered container."
8371
+ },
8372
+ {
8373
+ "name": "grow",
8374
+ "type": "Boolean",
8375
+ "default": "`false`",
8376
+ "description": "Allow item to keep size or expand to fill the available space."
8377
+ },
8378
+ {
8379
+ "name": "system_arguments",
8380
+ "type": "Hash",
8381
+ "default": "N/A",
8382
+ "description": "{{link_to_system_arguments_docs}}"
8383
+ }
8384
+ ],
8385
+ "slots": [
8386
+
8387
+ ],
8388
+ "methods": [
8389
+
8390
+ ],
8391
+ "previews": [
8392
+ {
8393
+ "preview_path": "primer/alpha/stack_item/default",
8394
+ "name": "default",
8395
+ "snapshot": "false",
8396
+ "skip_rules": {
8397
+ "wont_fix": [
8398
+ "region"
8399
+ ],
8400
+ "will_fix": [
8401
+ "color-contrast"
8402
+ ]
8403
+ }
8404
+ },
8405
+ {
8406
+ "preview_path": "primer/alpha/stack_item/playground",
8407
+ "name": "playground",
8408
+ "snapshot": "false",
8409
+ "skip_rules": {
8410
+ "wont_fix": [
8411
+ "region"
8412
+ ],
8413
+ "will_fix": [
8414
+ "color-contrast"
8415
+ ]
8416
+ }
8417
+ }
8418
+ ],
8419
+ "subcomponents": [
8420
+
8421
+ ]
8422
+ },
8197
8423
  {
8198
8424
  "fully_qualified_name": "Primer::Alpha::SubmitButton",
8199
8425
  "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.",
@@ -17238,6 +17464,6 @@
17238
17464
  "component": "BaseComponent",
17239
17465
  "fully_qualified_name": "Primer::BaseComponent",
17240
17466
  "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```",
17241
- "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. |"
17467
+ "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. |"
17242
17468
  }
17243
17469
  ]