@primer/view-components 0.35.0-rc.1713cf38 → 0.35.0-rc.1b08528f

Sign up to get free protection for your applications and to get access to all the features.
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.1713cf38",
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": {