@primer/view-components 0.35.0-rc.05e7928c → 0.35.0-rc.0e432b94

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 (40) hide show
  1. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  2. package/app/assets/styles/primer_view_components.css +1 -1
  3. package/app/assets/styles/primer_view_components.css.map +1 -1
  4. package/app/components/primer/alpha/action_bar_element.js +0 -3
  5. package/app/components/primer/alpha/action_list.css +1 -1
  6. package/app/components/primer/alpha/auto_complete.css +1 -1
  7. package/app/components/primer/alpha/banner.css +1 -1
  8. package/app/components/primer/alpha/dialog.css +1 -1
  9. package/app/components/primer/alpha/dropdown.css +1 -1
  10. package/app/components/primer/alpha/stack.css +1 -0
  11. package/app/components/primer/alpha/stack.css.json +90 -0
  12. package/app/components/primer/alpha/stack_item.css +1 -0
  13. package/app/components/primer/alpha/stack_item.css.json +12 -0
  14. package/app/components/primer/alpha/tab_nav.css +1 -1
  15. package/app/components/primer/alpha/text_field.css +1 -1
  16. package/app/components/primer/alpha/toggle_switch.css +1 -1
  17. package/app/components/primer/alpha/underline_nav.css +1 -1
  18. package/app/components/primer/beta/avatar.css +1 -1
  19. package/app/components/primer/beta/avatar_stack.css +1 -1
  20. package/app/components/primer/beta/blankslate.css +1 -1
  21. package/app/components/primer/beta/border_box.css +1 -1
  22. package/app/components/primer/beta/button.css +1 -1
  23. package/app/components/primer/beta/counter.css +1 -1
  24. package/app/components/primer/beta/popover.css +1 -1
  25. package/app/components/primer/beta/progress_bar.css +1 -1
  26. package/app/components/primer/beta/state.css +1 -1
  27. package/app/lib/primer/forms/primer_multi_input.js +44 -0
  28. package/app/lib/primer/forms/primer_text_field.js +119 -0
  29. package/app/lib/primer/forms/toggle_switch_input.js +34 -0
  30. package/package.json +5 -6
  31. package/static/arguments.json +86 -0
  32. package/static/audited_at.json +2 -0
  33. package/static/classes.json +6 -0
  34. package/static/constants.json +24 -0
  35. package/static/info_arch.json +172 -0
  36. package/static/previews.json +68 -0
  37. package/static/statuses.json +2 -0
  38. package/lib/primer/forms/primer_multi_input.d.ts +0 -10
  39. package/lib/primer/forms/primer_text_field.d.ts +0 -28
  40. package/lib/primer/forms/toggle_switch_input.d.ts +0 -5
@@ -1 +1 @@
1
- .Progress{background-color:var(--bgColor-neutral-muted);border-radius:6px;display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:2px}
1
+ .Progress{background-color:var(--bgColor-neutral-muted);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:1px solid #0000;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
@@ -1 +1 @@
1
- .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:5px var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
1
+ .State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
@@ -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.05e7928c",
3
+ "version": "0.35.0-rc.0e432b94",
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,8 +26,8 @@
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/",
@@ -66,7 +66,7 @@
66
66
  "@playwright/test": "^1.35.1",
67
67
  "@primer/css": "21.3.6",
68
68
  "@primer/primitives": "^9.0.2",
69
- "@primer/stylelint-config": "^12.7.2",
69
+ "@primer/stylelint-config": "^13.0.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",
@@ -89,8 +89,7 @@
89
89
  "prettier": "^3.3.2",
90
90
  "rollup": "^2.79.1",
91
91
  "rollup-plugin-terser": "^7.0.2",
92
- "stylelint": "^16.1.0",
93
- "stylelint-config-standard": "^36.0.0",
92
+ "stylelint-actions-formatters": "^16.3.1",
94
93
  "tslib": "^2.4.0",
95
94
  "typescript": "^5.2.2",
96
95
  "vite": "^5.4.3",
@@ -2510,6 +2510,92 @@
2510
2510
  }
2511
2511
  ]
2512
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
+ },
2513
2599
  {
2514
2600
  "component": "SubmitButton",
2515
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
  ],
@@ -621,6 +621,30 @@
621
621
  },
622
622
  "Primer::Alpha::SelectPanel::ItemList": {
623
623
  },
624
+ "Primer::Alpha::Stack": {
625
+ "ARG_CLASSES": [
626
+ "Primer::Alpha::Stack::JustifyArg",
627
+ "Primer::Alpha::Stack::DirectionArg",
628
+ "Primer::Alpha::Stack::AlignArg",
629
+ "Primer::Alpha::Stack::WrapArg",
630
+ "Primer::Alpha::Stack::PaddingArg",
631
+ "Primer::Alpha::Stack::GapArg"
632
+ ],
633
+ "AlignArg": "Primer::Alpha::Stack::AlignArg",
634
+ "DEFAULT_TAG": "div",
635
+ "DirectionArg": "Primer::Alpha::Stack::DirectionArg",
636
+ "GapArg": "Primer::Alpha::Stack::GapArg",
637
+ "JustifyArg": "Primer::Alpha::Stack::JustifyArg",
638
+ "PaddingArg": "Primer::Alpha::Stack::PaddingArg",
639
+ "WrapArg": "Primer::Alpha::Stack::WrapArg"
640
+ },
641
+ "Primer::Alpha::StackItem": {
642
+ "ARG_CLASSES": [
643
+ "Primer::Alpha::StackItem::GrowArg"
644
+ ],
645
+ "DEFAULT_TAG": "div",
646
+ "GrowArg": "Primer::Alpha::StackItem::GrowArg"
647
+ },
624
648
  "Primer::Alpha::SubmitButton": {
625
649
  },
626
650
  "Primer::Alpha::TabContainer": {
@@ -8248,6 +8248,178 @@
8248
8248
  }
8249
8249
  ]
8250
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
+ },
8251
8423
  {
8252
8424
  "fully_qualified_name": "Primer::Alpha::SubmitButton",
8253
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.",
@@ -6249,6 +6249,74 @@
6249
6249
  }
6250
6250
  ]
6251
6251
  },
6252
+ {
6253
+ "name": "stack",
6254
+ "component": "Stack",
6255
+ "status": "alpha",
6256
+ "lookup_path": "primer/alpha/stack",
6257
+ "examples": [
6258
+ {
6259
+ "preview_path": "primer/alpha/stack/default",
6260
+ "name": "default",
6261
+ "snapshot": "false",
6262
+ "skip_rules": {
6263
+ "wont_fix": [
6264
+ "region"
6265
+ ],
6266
+ "will_fix": [
6267
+ "color-contrast"
6268
+ ]
6269
+ }
6270
+ },
6271
+ {
6272
+ "preview_path": "primer/alpha/stack/playground",
6273
+ "name": "playground",
6274
+ "snapshot": "false",
6275
+ "skip_rules": {
6276
+ "wont_fix": [
6277
+ "region"
6278
+ ],
6279
+ "will_fix": [
6280
+ "color-contrast"
6281
+ ]
6282
+ }
6283
+ }
6284
+ ]
6285
+ },
6286
+ {
6287
+ "name": "stack_item",
6288
+ "component": "StackItem",
6289
+ "status": "alpha",
6290
+ "lookup_path": "primer/alpha/stack_item",
6291
+ "examples": [
6292
+ {
6293
+ "preview_path": "primer/alpha/stack_item/default",
6294
+ "name": "default",
6295
+ "snapshot": "false",
6296
+ "skip_rules": {
6297
+ "wont_fix": [
6298
+ "region"
6299
+ ],
6300
+ "will_fix": [
6301
+ "color-contrast"
6302
+ ]
6303
+ }
6304
+ },
6305
+ {
6306
+ "preview_path": "primer/alpha/stack_item/playground",
6307
+ "name": "playground",
6308
+ "snapshot": "false",
6309
+ "skip_rules": {
6310
+ "wont_fix": [
6311
+ "region"
6312
+ ],
6313
+ "will_fix": [
6314
+ "color-contrast"
6315
+ ]
6316
+ }
6317
+ }
6318
+ ]
6319
+ },
6252
6320
  {
6253
6321
  "name": "state",
6254
6322
  "component": "State",
@@ -54,6 +54,8 @@
54
54
  "Primer::Alpha::Select": "alpha",
55
55
  "Primer::Alpha::SelectPanel": "alpha",
56
56
  "Primer::Alpha::SelectPanel::ItemList": "alpha",
57
+ "Primer::Alpha::Stack": "alpha",
58
+ "Primer::Alpha::StackItem": "alpha",
57
59
  "Primer::Alpha::SubmitButton": "alpha",
58
60
  "Primer::Alpha::TabContainer": "alpha",
59
61
  "Primer::Alpha::TabNav": "alpha",
@@ -1,10 +0,0 @@
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
- }