@primer/view-components 0.35.0-rc.190fca91 → 0.35.0-rc.1b08528f

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/app/assets/javascripts/components/primer/primer.d.ts +0 -1
  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.d.ts +17 -0
  7. package/app/components/primer/alpha/action_list.css +1 -1
  8. package/app/components/primer/alpha/action_list.d.ts +16 -0
  9. package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +42 -0
  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/menu.d.ts +1 -0
  13. package/app/components/primer/alpha/dropdown.d.ts +1 -0
  14. package/app/components/primer/alpha/modal_dialog.d.ts +18 -0
  15. package/app/components/primer/alpha/segmented_control.d.ts +12 -0
  16. package/app/components/primer/alpha/select_panel_element.d.ts +63 -0
  17. package/app/components/primer/alpha/stack.css +1 -0
  18. package/app/components/primer/alpha/stack.css.json +90 -0
  19. package/app/components/primer/alpha/stack_item.css +1 -0
  20. package/app/components/primer/alpha/stack_item.css.json +12 -0
  21. package/app/components/primer/alpha/tab_container.d.ts +1 -0
  22. package/app/components/primer/alpha/text_field.css +1 -1
  23. package/app/components/primer/alpha/toggle_switch.d.ts +34 -0
  24. package/app/components/primer/alpha/tool_tip.d.ts +27 -0
  25. package/app/components/primer/alpha/x_banner.d.ts +18 -0
  26. package/app/components/primer/anchored_position.d.ts +27 -0
  27. package/app/components/primer/aria_live.d.ts +8 -0
  28. package/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  29. package/app/components/primer/beta/clipboard_copy.d.ts +1 -0
  30. package/app/components/primer/beta/nav_list.d.ts +20 -0
  31. package/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  32. package/app/components/primer/beta/relative_time.d.ts +1 -0
  33. package/app/components/primer/dialog_helper.d.ts +15 -0
  34. package/app/components/primer/dialog_helper.js +0 -1
  35. package/app/components/primer/focus_group.d.ts +19 -0
  36. package/app/components/primer/primer.d.ts +27 -0
  37. package/app/components/primer/primer.js +0 -1
  38. package/app/components/primer/scrollable_region.d.ts +13 -0
  39. package/app/components/primer/shared_events.d.ts +11 -0
  40. package/app/lib/primer/forms/primer_multi_input.js +44 -0
  41. package/app/lib/primer/forms/primer_text_field.js +119 -0
  42. package/app/lib/primer/forms/toggle_switch_input.js +34 -0
  43. package/package.json +7 -7
  44. package/static/arguments.json +92 -28
  45. package/static/audited_at.json +2 -1
  46. package/static/classes.json +6 -0
  47. package/static/constants.json +24 -2
  48. package/static/info_arch.json +191 -95
  49. package/static/previews.json +81 -47
  50. package/static/statuses.json +2 -1
  51. package/app/assets/javascripts/components/primer/alpha/image_crop.d.ts +0 -1
  52. package/app/components/primer/alpha/image_crop.js +0 -1
  53. /package/{lib → app/lib}/primer/forms/primer_multi_input.d.ts +0 -0
  54. /package/{lib → app/lib}/primer/forms/primer_text_field.d.ts +0 -0
  55. /package/{lib → app/lib}/primer/forms/toggle_switch_input.d.ts +0 -0
@@ -0,0 +1,27 @@
1
+ import type { AnchorAlignment, AnchorSide, PositionSettings } from '@primer/behaviors';
2
+ export default class AnchoredPositionElement extends HTMLElement implements PositionSettings {
3
+ #private;
4
+ get align(): AnchorAlignment;
5
+ set align(value: AnchorAlignment);
6
+ get side(): AnchorSide;
7
+ set side(value: AnchorSide);
8
+ get anchorOffset(): number;
9
+ set anchorOffset(value: number | 'normal' | 'spacious');
10
+ get anchor(): string;
11
+ set anchor(value: string);
12
+ get anchorElement(): HTMLElement | null;
13
+ set anchorElement(value: HTMLElement | null);
14
+ get alignmentOffset(): number;
15
+ set alignmentOffset(value: number);
16
+ get allowOutOfBounds(): boolean;
17
+ set allowOutOfBounds(value: boolean);
18
+ connectedCallback(): void;
19
+ static observedAttributes: string[];
20
+ attributeChangedCallback(): void;
21
+ update(): void;
22
+ }
23
+ declare global {
24
+ interface Window {
25
+ AnchoredPositionElement: typeof AnchoredPositionElement;
26
+ }
27
+ }
@@ -0,0 +1,8 @@
1
+ export declare function announceFromElement(el: HTMLElement, options?: {
2
+ assertive?: boolean;
3
+ element?: HTMLElement;
4
+ }): void;
5
+ export declare function announce(message: string, options?: {
6
+ assertive?: boolean;
7
+ element?: HTMLElement;
8
+ }): void;
@@ -0,0 +1 @@
1
+ import '@github/auto-complete-element';
@@ -0,0 +1 @@
1
+ import '@github/clipboard-copy-element';
@@ -0,0 +1,20 @@
1
+ export declare class NavListElement extends HTMLElement {
2
+ #private;
3
+ items: HTMLElement[];
4
+ topLevelList: HTMLElement;
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ selectItemById(itemId: string | null): boolean;
8
+ selectItemByHref(href: string | null): boolean;
9
+ selectItemByCurrentLocation(): boolean;
10
+ expandItem(item: HTMLElement): void;
11
+ collapseItem(item: HTMLElement): void;
12
+ itemIsExpanded(item: HTMLElement | null): boolean;
13
+ handleItemWithSubItemClick(e: Event): void;
14
+ handleItemWithSubItemKeydown(e: KeyboardEvent): void;
15
+ }
16
+ declare global {
17
+ interface Window {
18
+ NavListElement: typeof NavListElement;
19
+ }
20
+ }
@@ -0,0 +1,19 @@
1
+ export declare class NavListGroupElement extends HTMLElement {
2
+ #private;
3
+ showMoreItem: HTMLElement;
4
+ focusMarkers: HTMLElement[];
5
+ connectedCallback(): void;
6
+ get showMoreDisabled(): boolean;
7
+ set showMoreDisabled(value: boolean);
8
+ set currentPage(value: number);
9
+ get currentPage(): number;
10
+ get totalPages(): number;
11
+ get paginationSrc(): string;
12
+ private showMore;
13
+ private setShowMoreItemState;
14
+ }
15
+ declare global {
16
+ interface Window {
17
+ NavListGroupElement: typeof NavListGroupElement;
18
+ }
19
+ }
@@ -0,0 +1 @@
1
+ import '@github/relative-time-element';
@@ -0,0 +1,15 @@
1
+ export declare class DialogHelperElement extends HTMLElement {
2
+ #private;
3
+ get dialog(): HTMLDialogElement | null;
4
+ connectedCallback(): void;
5
+ disconnectedCallback(): void;
6
+ handleEvent(event: MouseEvent): void;
7
+ }
8
+ declare global {
9
+ interface Window {
10
+ DialogHelperElement: typeof DialogHelperElement;
11
+ }
12
+ interface HTMLElementTagNameMap {
13
+ 'dialog-helper': DialogHelperElement;
14
+ }
15
+ }
@@ -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
@@ -0,0 +1,19 @@
1
+ import '@oddbird/popover-polyfill';
2
+ export default class FocusGroupElement extends HTMLElement {
3
+ #private;
4
+ get nowrap(): boolean;
5
+ set nowrap(value: boolean);
6
+ get direction(): 'horizontal' | 'vertical' | 'both';
7
+ set direction(value: 'horizontal' | 'vertical' | 'both');
8
+ get retain(): boolean;
9
+ set retain(value: boolean);
10
+ get mnemonics(): boolean;
11
+ connectedCallback(): void;
12
+ disconnectedCallback(): void;
13
+ handleEvent(event: Event): void;
14
+ }
15
+ declare global {
16
+ interface Window {
17
+ FocusGroupElement: typeof FocusGroupElement;
18
+ }
19
+ }
@@ -0,0 +1,27 @@
1
+ import '@github/include-fragment-element';
2
+ import '@github/remote-input-element';
3
+ import './alpha/action_list';
4
+ import './alpha/action_bar_element';
5
+ import './alpha/dropdown';
6
+ import './anchored_position';
7
+ import './dialog_helper';
8
+ import './focus_group';
9
+ import './scrollable_region';
10
+ import './aria_live';
11
+ import './shared_events';
12
+ import './alpha/modal_dialog';
13
+ import './beta/nav_list';
14
+ import './beta/nav_list_group_element';
15
+ import './alpha/segmented_control';
16
+ import './alpha/toggle_switch';
17
+ import './alpha/tool_tip';
18
+ import './alpha/x_banner';
19
+ import './beta/auto_complete/auto_complete';
20
+ import './beta/clipboard_copy';
21
+ import './beta/relative_time';
22
+ import './alpha/tab_container';
23
+ import '../../lib/primer/forms/primer_multi_input';
24
+ import '../../lib/primer/forms/primer_text_field';
25
+ import '../../lib/primer/forms/toggle_switch_input';
26
+ import './alpha/action_menu/action_menu_element';
27
+ import './alpha/select_panel_element';
@@ -9,7 +9,6 @@ import './focus_group';
9
9
  import './scrollable_region';
10
10
  import './aria_live';
11
11
  import './shared_events';
12
- import './alpha/image_crop';
13
12
  import './alpha/modal_dialog';
14
13
  import './beta/nav_list';
15
14
  import './beta/nav_list_group_element';
@@ -0,0 +1,13 @@
1
+ export declare class ScrollableRegionElement extends HTMLElement {
2
+ hasOverflow: boolean;
3
+ labelledBy: string;
4
+ observer: ResizeObserver;
5
+ connectedCallback(): void;
6
+ disconnectedCallback(): void;
7
+ attributeChangedCallback(name: string): void;
8
+ }
9
+ declare global {
10
+ interface Window {
11
+ ScrollableRegionElement: typeof ScrollableRegionElement;
12
+ }
13
+ }
@@ -0,0 +1,11 @@
1
+ export type ItemActivatedEvent = {
2
+ item: Element;
3
+ checked: boolean;
4
+ value: string | null;
5
+ };
6
+ declare global {
7
+ interface HTMLElementEventMap {
8
+ itemActivated: CustomEvent<ItemActivatedEvent>;
9
+ beforeItemActivated: CustomEvent<ItemActivatedEvent>;
10
+ }
11
+ }
@@ -0,0 +1,44 @@
1
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
2
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
3
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
4
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
5
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
6
+ };
7
+ /* eslint-disable custom-elements/expose-class-on-global */
8
+ import { controller, targets } from '@github/catalyst';
9
+ let PrimerMultiInputElement = class PrimerMultiInputElement extends HTMLElement {
10
+ activateField(name) {
11
+ const fieldWithName = this.findField(name);
12
+ if (!fieldWithName)
13
+ return;
14
+ for (const field of this.fields) {
15
+ if (field === fieldWithName)
16
+ continue;
17
+ field.setAttribute('disabled', 'disabled');
18
+ field.setAttribute('hidden', 'hidden');
19
+ field.parentElement?.setAttribute('hidden', 'hidden');
20
+ }
21
+ fieldWithName.removeAttribute('disabled');
22
+ fieldWithName.removeAttribute('hidden');
23
+ fieldWithName.parentElement?.removeAttribute('hidden');
24
+ }
25
+ findField(name) {
26
+ for (const field of this.fields) {
27
+ if (field.getAttribute('data-name') === name) {
28
+ return field;
29
+ }
30
+ }
31
+ return null;
32
+ }
33
+ };
34
+ __decorate([
35
+ targets
36
+ ], PrimerMultiInputElement.prototype, "fields", void 0);
37
+ PrimerMultiInputElement = __decorate([
38
+ controller
39
+ ], PrimerMultiInputElement);
40
+ export { PrimerMultiInputElement };
41
+ if (!window.customElements.get('primer-multi-input')) {
42
+ Object.assign(window, { PrimerMultiInputElement });
43
+ window.customElements.define('primer-multi-input', PrimerMultiInputElement);
44
+ }
@@ -0,0 +1,119 @@
1
+ /* eslint-disable custom-elements/expose-class-on-global */
2
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
7
+ };
8
+ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
9
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
10
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
11
+ return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
12
+ };
13
+ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
14
+ if (kind === "m") throw new TypeError("Private method is not writable");
15
+ if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
16
+ if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
17
+ return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
18
+ };
19
+ var _PrimerTextFieldElement_abortController;
20
+ import '@github/auto-check-element';
21
+ import { controller, target } from '@github/catalyst';
22
+ let PrimerTextFieldElement = class PrimerTextFieldElement extends HTMLElement {
23
+ constructor() {
24
+ super(...arguments);
25
+ _PrimerTextFieldElement_abortController.set(this, void 0);
26
+ }
27
+ connectedCallback() {
28
+ __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
29
+ const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
30
+ this.addEventListener('auto-check-success', async (event) => {
31
+ const message = await event.detail.response.text();
32
+ if (message && message.length > 0) {
33
+ this.setSuccess(message);
34
+ }
35
+ else {
36
+ this.clearError();
37
+ }
38
+ }, { signal });
39
+ this.addEventListener('auto-check-error', async (event) => {
40
+ const errorMessage = await event.detail.response.text();
41
+ this.setError(errorMessage);
42
+ }, { signal });
43
+ }
44
+ disconnectedCallback() {
45
+ __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")?.abort();
46
+ }
47
+ clearContents() {
48
+ this.inputElement.value = '';
49
+ this.inputElement.focus();
50
+ this.inputElement.dispatchEvent(new Event('input', { bubbles: true, cancelable: false }));
51
+ }
52
+ clearError() {
53
+ this.inputElement.removeAttribute('invalid');
54
+ this.validationElement.hidden = true;
55
+ this.validationMessageElement.replaceChildren();
56
+ }
57
+ setValidationMessage(message) {
58
+ const template = document.createElement('template');
59
+ // eslint-disable-next-line github/no-inner-html
60
+ template.innerHTML = message;
61
+ const fragment = document.importNode(template.content, true);
62
+ this.validationMessageElement.replaceChildren(fragment);
63
+ }
64
+ toggleValidationStyling(isError) {
65
+ if (isError) {
66
+ this.validationElement.classList.remove('FormControl-inlineValidation--success');
67
+ }
68
+ else {
69
+ this.validationElement.classList.add('FormControl-inlineValidation--success');
70
+ }
71
+ this.validationSuccessIcon.hidden = isError;
72
+ this.validationErrorIcon.hidden = !isError;
73
+ this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
74
+ }
75
+ setSuccess(message) {
76
+ this.toggleValidationStyling(false);
77
+ this.setValidationMessage(message);
78
+ this.validationElement.hidden = false;
79
+ }
80
+ setError(message) {
81
+ this.toggleValidationStyling(true);
82
+ this.setValidationMessage(message);
83
+ this.validationElement.hidden = false;
84
+ }
85
+ showLeadingSpinner() {
86
+ this.leadingSpinner?.removeAttribute('hidden');
87
+ this.leadingVisual?.setAttribute('hidden', '');
88
+ }
89
+ hideLeadingSpinner() {
90
+ this.leadingSpinner?.setAttribute('hidden', '');
91
+ this.leadingVisual?.removeAttribute('hidden');
92
+ }
93
+ };
94
+ _PrimerTextFieldElement_abortController = new WeakMap();
95
+ __decorate([
96
+ target
97
+ ], PrimerTextFieldElement.prototype, "inputElement", void 0);
98
+ __decorate([
99
+ target
100
+ ], PrimerTextFieldElement.prototype, "validationElement", void 0);
101
+ __decorate([
102
+ target
103
+ ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
104
+ __decorate([
105
+ target
106
+ ], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
107
+ __decorate([
108
+ target
109
+ ], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
110
+ __decorate([
111
+ target
112
+ ], PrimerTextFieldElement.prototype, "leadingVisual", void 0);
113
+ __decorate([
114
+ target
115
+ ], PrimerTextFieldElement.prototype, "leadingSpinner", void 0);
116
+ PrimerTextFieldElement = __decorate([
117
+ controller
118
+ ], PrimerTextFieldElement);
119
+ export { PrimerTextFieldElement };
@@ -0,0 +1,34 @@
1
+ /* eslint-disable custom-elements/expose-class-on-global */
2
+ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
3
+ var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
4
+ if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
5
+ else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
6
+ return c > 3 && r && Object.defineProperty(target, key, r), r;
7
+ };
8
+ import { controller, target } from '@github/catalyst';
9
+ let ToggleSwitchInputElement = class ToggleSwitchInputElement extends HTMLElement {
10
+ connectedCallback() {
11
+ this.addEventListener('toggleSwitchError', (event) => {
12
+ this.validationMessageElement.textContent = event.detail;
13
+ this.validationElement.removeAttribute('hidden');
14
+ });
15
+ this.addEventListener('toggleSwitchSuccess', () => {
16
+ this.validationMessageElement.textContent = '';
17
+ this.validationElement.setAttribute('hidden', 'hidden');
18
+ });
19
+ this.addEventListener('toggleSwitchLoading', () => {
20
+ this.validationMessageElement.textContent = '';
21
+ this.validationElement.setAttribute('hidden', 'hidden');
22
+ });
23
+ }
24
+ };
25
+ __decorate([
26
+ target
27
+ ], ToggleSwitchInputElement.prototype, "validationElement", void 0);
28
+ __decorate([
29
+ target
30
+ ], ToggleSwitchInputElement.prototype, "validationMessageElement", void 0);
31
+ ToggleSwitchInputElement = __decorate([
32
+ controller
33
+ ], ToggleSwitchInputElement);
34
+ export { ToggleSwitchInputElement };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/view-components",
3
- "version": "0.35.0-rc.190fca91",
3
+ "version": "0.35.0-rc.1b08528f",
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": "^13.0.1",
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",
@@ -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",
@@ -1345,34 +1351,6 @@
1345
1351
  }
1346
1352
  ]
1347
1353
  },
1348
- {
1349
- "component": "ImageCrop",
1350
- "status": "alpha",
1351
- "a11y_reviewed": false,
1352
- "short_name": "ImageCrop",
1353
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/image_crop.rb",
1354
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/image_crop/default/",
1355
- "parameters": [
1356
- {
1357
- "name": "src",
1358
- "type": "String",
1359
- "default": "N/A",
1360
- "description": "The path of the image to crop."
1361
- },
1362
- {
1363
- "name": "rounded",
1364
- "type": "Boolean",
1365
- "default": "`true`",
1366
- "description": "If the crop mask should be a circle. Defaults to true."
1367
- },
1368
- {
1369
- "name": "system_arguments",
1370
- "type": "Hash",
1371
- "default": "N/A",
1372
- "description": "[System arguments](/system-arguments)"
1373
- }
1374
- ]
1375
- },
1376
1354
  {
1377
1355
  "component": "Layout",
1378
1356
  "status": "alpha",
@@ -2510,6 +2488,92 @@
2510
2488
  }
2511
2489
  ]
2512
2490
  },
2491
+ {
2492
+ "component": "Stack",
2493
+ "status": "alpha",
2494
+ "a11y_reviewed": false,
2495
+ "short_name": "Stack",
2496
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack.rb",
2497
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack/default/",
2498
+ "parameters": [
2499
+ {
2500
+ "name": "tag",
2501
+ "type": "Symbol",
2502
+ "default": "`:div`",
2503
+ "description": "Customize the element type of the rendered container."
2504
+ },
2505
+ {
2506
+ "name": "gap",
2507
+ "type": "Symbol",
2508
+ "default": "`GapArg::DEFAULT`",
2509
+ "description": "Specify the gap between children elements in the stack. One of `nil`, `:condensed`, `:normal`, or `:spacious`."
2510
+ },
2511
+ {
2512
+ "name": "direction",
2513
+ "type": "Symbol",
2514
+ "default": "`:vertical`",
2515
+ "description": "Specify the direction for the stack container. One of `nil`, `:horizontal`, or `:vertical`."
2516
+ },
2517
+ {
2518
+ "name": "align",
2519
+ "type": "Symbol",
2520
+ "default": "`:stretch`",
2521
+ "description": "Specify the alignment between items in the cross-axis of the direction. One of `nil`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`."
2522
+ },
2523
+ {
2524
+ "name": "wrap",
2525
+ "type": "Symbol",
2526
+ "default": "`:nowrap`",
2527
+ "description": "Specify whether items are forced onto one line or can wrap onto multiple lines. One of `nil`, `:nowrap`, or `:wrap`."
2528
+ },
2529
+ {
2530
+ "name": "justify",
2531
+ "type": "Symbol",
2532
+ "default": "`:start`",
2533
+ "description": "Specify how items will be distributed in the stacking direction. One of `nil`, `:center`, `:end`, `:space_between`, `:space_evenly`, or `:start`."
2534
+ },
2535
+ {
2536
+ "name": "padding",
2537
+ "type": "Symbol",
2538
+ "default": "`:none`",
2539
+ "description": "Specify the padding of the stack container. One of `nil`, `:condensed`, `:none`, `:normal`, or `:spacious`."
2540
+ },
2541
+ {
2542
+ "name": "system_arguments",
2543
+ "type": "Hash",
2544
+ "default": "N/A",
2545
+ "description": "[System arguments](/system-arguments)"
2546
+ }
2547
+ ]
2548
+ },
2549
+ {
2550
+ "component": "StackItem",
2551
+ "status": "alpha",
2552
+ "a11y_reviewed": false,
2553
+ "short_name": "StackItem",
2554
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/stack_item.rb",
2555
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/stack_item/default/",
2556
+ "parameters": [
2557
+ {
2558
+ "name": "tag",
2559
+ "type": "Symbol",
2560
+ "default": "`:div`",
2561
+ "description": "Customize the element type of the rendered container."
2562
+ },
2563
+ {
2564
+ "name": "grow",
2565
+ "type": "Boolean",
2566
+ "default": "`false`",
2567
+ "description": "Allow item to keep size or expand to fill the available space."
2568
+ },
2569
+ {
2570
+ "name": "system_arguments",
2571
+ "type": "Hash",
2572
+ "default": "N/A",
2573
+ "description": "[System arguments](/system-arguments)"
2574
+ }
2575
+ ]
2576
+ },
2513
2577
  {
2514
2578
  "component": "SubmitButton",
2515
2579
  "status": "alpha",
@@ -30,7 +30,6 @@
30
30
  "Primer::Alpha::HellipButton": "",
31
31
  "Primer::Alpha::HiddenTextExpander": "",
32
32
  "Primer::Alpha::Image": "",
33
- "Primer::Alpha::ImageCrop": "",
34
33
  "Primer::Alpha::Layout": "",
35
34
  "Primer::Alpha::Layout::Main": "",
36
35
  "Primer::Alpha::Layout::Sidebar": "",
@@ -54,6 +53,8 @@
54
53
  "Primer::Alpha::Select": "",
55
54
  "Primer::Alpha::SelectPanel": "",
56
55
  "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
56
+ "Primer::Alpha::Stack": "",
57
+ "Primer::Alpha::StackItem": "",
57
58
  "Primer::Alpha::SubmitButton": "",
58
59
  "Primer::Alpha::TabContainer": "",
59
60
  "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
  ],
@@ -356,8 +356,6 @@
356
356
  },
357
357
  "Primer::Alpha::Image": {
358
358
  },
359
- "Primer::Alpha::ImageCrop": {
360
- },
361
359
  "Primer::Alpha::Layout": {
362
360
  "FIRST_IN_SOURCE_DEFAULT": "sidebar",
363
361
  "FIRST_IN_SOURCE_OPTIONS": [
@@ -621,6 +619,30 @@
621
619
  },
622
620
  "Primer::Alpha::SelectPanel::ItemList": {
623
621
  },
622
+ "Primer::Alpha::Stack": {
623
+ "ARG_CLASSES": [
624
+ "Primer::Alpha::Stack::JustifyArg",
625
+ "Primer::Alpha::Stack::DirectionArg",
626
+ "Primer::Alpha::Stack::AlignArg",
627
+ "Primer::Alpha::Stack::WrapArg",
628
+ "Primer::Alpha::Stack::PaddingArg",
629
+ "Primer::Alpha::Stack::GapArg"
630
+ ],
631
+ "AlignArg": "Primer::Alpha::Stack::AlignArg",
632
+ "DEFAULT_TAG": "div",
633
+ "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
634
+ "GapArg": "Primer::Alpha::Stack::GapArg",
635
+ "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
636
+ "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
637
+ "WrapArg": "Primer::Alpha::Stack::WrapArg"
638
+ },
639
+ "Primer::Alpha::StackItem": {
640
+ "ARG_CLASSES": [
641
+ "Primer::Alpha::StackItem::GrowArg"
642
+ ],
643
+ "DEFAULT_TAG": "div",
644
+ "GrowArg": "Primer::Alpha::StackItem::GrowArg"
645
+ },
624
646
  "Primer::Alpha::SubmitButton": {
625
647
  },
626
648
  "Primer::Alpha::TabContainer": {