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

Sign up to get free protection for your applications and to get access to all the features.
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
- }