primer_view_components 0.0.112 → 0.0.113

Sign up to get free protection for your applications and to get access to all the features.
Files changed (113) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +38 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +3 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list.css +1 -1
  8. data/app/components/primer/alpha/action_list.css.json +1 -1
  9. data/app/components/primer/alpha/action_list.css.map +1 -1
  10. data/app/components/primer/alpha/action_list.pcss +0 -15
  11. data/app/components/primer/alpha/auto_complete.css +1 -1
  12. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  13. data/app/components/primer/alpha/auto_complete.pcss +1 -1
  14. data/app/components/primer/alpha/banner.css +1 -1
  15. data/app/components/primer/alpha/banner.css.map +1 -1
  16. data/app/components/primer/alpha/banner.pcss +2 -2
  17. data/app/components/primer/alpha/dialog/body.rb +3 -0
  18. data/app/components/primer/alpha/dialog/footer.rb +3 -0
  19. data/app/components/primer/alpha/dialog/header.rb +3 -0
  20. data/app/components/primer/alpha/dialog.css +1 -0
  21. data/app/components/primer/alpha/dialog.css.json +1 -0
  22. data/app/components/primer/alpha/dialog.css.map +1 -0
  23. data/app/components/primer/alpha/dialog.pcss +484 -0
  24. data/app/components/primer/alpha/dialog.rb +3 -0
  25. data/app/components/primer/alpha/segmented_control.css +1 -1
  26. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  27. data/app/components/primer/alpha/text_field.css +3 -0
  28. data/app/components/primer/alpha/text_field.css.json +1 -0
  29. data/app/components/primer/alpha/text_field.css.map +1 -0
  30. data/app/components/primer/alpha/text_field.pcss +683 -0
  31. data/app/components/primer/alpha/toggle_switch.d.ts +1 -1
  32. data/app/components/primer/alpha/toggle_switch.js +7 -4
  33. data/app/components/primer/alpha/toggle_switch.ts +7 -3
  34. data/app/components/primer/beta/button_group.css +1 -0
  35. data/app/components/primer/beta/button_group.css.json +1 -0
  36. data/app/components/primer/beta/button_group.css.map +1 -0
  37. data/app/components/primer/beta/button_group.pcss +92 -0
  38. data/app/components/primer/{clipboard_copy.d.ts → beta/clipboard_copy.d.ts} +0 -0
  39. data/app/components/primer/{clipboard_copy.html.erb → beta/clipboard_copy.html.erb} +0 -0
  40. data/app/components/primer/{clipboard_copy.js → beta/clipboard_copy.js} +0 -0
  41. data/app/components/primer/beta/clipboard_copy.rb +50 -0
  42. data/app/components/primer/{clipboard_copy.ts → beta/clipboard_copy.ts} +0 -0
  43. data/app/components/primer/beta/popover.css.map +1 -1
  44. data/app/components/primer/beta/popover.pcss +5 -5
  45. data/app/components/primer/beta/relative_time.rb +160 -0
  46. data/app/components/primer/button_component.css +1 -0
  47. data/app/components/primer/button_component.css.json +1 -0
  48. data/app/components/primer/button_component.css.map +1 -0
  49. data/app/components/primer/button_component.pcss +557 -0
  50. data/app/components/primer/button_component.rb +1 -1
  51. data/app/components/primer/clipboard_copy.rb +2 -43
  52. data/app/components/primer/component.rb +4 -0
  53. data/app/components/primer/local_time.d.ts +1 -1
  54. data/app/components/primer/local_time.js +1 -1
  55. data/app/components/primer/local_time.rb +3 -1
  56. data/app/components/primer/local_time.ts +1 -1
  57. data/app/components/primer/primer.d.ts +1 -1
  58. data/app/components/primer/primer.js +1 -1
  59. data/app/components/primer/primer.pcss +10 -0
  60. data/app/components/primer/primer.ts +1 -1
  61. data/app/components/primer/time_ago_component.d.ts +1 -1
  62. data/app/components/primer/time_ago_component.js +1 -1
  63. data/app/components/primer/time_ago_component.rb +2 -1
  64. data/app/components/primer/time_ago_component.ts +1 -1
  65. data/app/forms/submit_button_form.rb +8 -2
  66. data/app/helpers/primer/form_helper.rb +12 -0
  67. data/lib/postcss_mixins/clearfix.pcss +12 -0
  68. data/lib/primer/deprecations.rb +96 -26
  69. data/lib/primer/deprecations.yml +68 -0
  70. data/lib/primer/forms/base.rb +7 -20
  71. data/lib/primer/forms/base_component.rb +15 -1
  72. data/lib/primer/forms/button.html.erb +4 -0
  73. data/lib/primer/forms/button.rb +68 -0
  74. data/lib/primer/forms/check_box.html.erb +2 -2
  75. data/lib/primer/forms/check_box.rb +1 -1
  76. data/lib/primer/forms/check_box_group.html.erb +2 -2
  77. data/lib/primer/forms/dsl/button_input.rb +29 -0
  78. data/lib/primer/forms/dsl/input_methods.rb +7 -2
  79. data/lib/primer/forms/dsl/submit_button_input.rb +1 -0
  80. data/lib/primer/forms/dsl/text_field_input.rb +0 -7
  81. data/lib/primer/forms/radio_button.html.erb +2 -2
  82. data/lib/primer/forms/radio_button.rb +1 -1
  83. data/lib/primer/forms/radio_button_group.html.erb +2 -2
  84. data/lib/primer/forms/select_list.html.erb +1 -1
  85. data/lib/primer/forms/select_list.rb +4 -1
  86. data/lib/primer/forms/submit_button.html.erb +1 -4
  87. data/lib/primer/forms/submit_button.rb +1 -37
  88. data/lib/primer/forms/text_area.html.erb +1 -1
  89. data/lib/primer/forms/text_area.rb +5 -1
  90. data/lib/primer/forms/text_field.html.erb +1 -1
  91. data/lib/primer/forms/text_field.rb +11 -0
  92. data/lib/primer/forms/utils.rb +28 -0
  93. data/lib/primer/view_components/audited.rb +14 -0
  94. data/lib/primer/view_components/engine.rb +1 -0
  95. data/lib/primer/view_components/linters/clipboard_copy_component_migration_counter.rb +2 -2
  96. data/lib/primer/view_components/linters/helpers/deprecated_components_helpers.rb +3 -18
  97. data/lib/primer/view_components/version.rb +1 -1
  98. data/lib/rubocop/cop/primer/component_name_migration.rb +2 -2
  99. data/lib/tasks/docs.rake +3 -2
  100. data/previews/primer/alpha/auto_complete_preview.rb +12 -0
  101. data/previews/primer/alpha/segmented_control_preview.rb +9 -6
  102. data/previews/primer/alpha/text_field_preview.rb +77 -52
  103. data/previews/primer/beta/clipboard_copy_preview/element.html.erb +2 -0
  104. data/previews/primer/beta/clipboard_copy_preview.rb +39 -0
  105. data/previews/primer/beta/relative_time_preview.rb +271 -0
  106. data/previews/primer/forms/forms_preview.rb +1 -0
  107. data/static/arguments.json +143 -33
  108. data/static/audited_at.json +6 -4
  109. data/static/constants.json +124 -0
  110. data/static/statuses.json +4 -2
  111. metadata +34 -8
  112. data/previews/primer/clipboard_copy_preview/element.html.erb +0 -2
  113. data/previews/primer/clipboard_copy_preview.rb +0 -37
@@ -0,0 +1,683 @@
1
+ /* FormControl */
2
+
3
+ /* groups label, field, caption and inline error message */
4
+ .FormControl {
5
+ display: inline-flex;
6
+ flex-direction: column;
7
+ gap: var(--base-size-4, 4px);
8
+ }
9
+
10
+ /* fill container */
11
+ .FormControl--fullWidth {
12
+ display: flex;
13
+ }
14
+
15
+ /* <label> */
16
+ .FormControl-label {
17
+ font-size: var(--primer-text-body-size-medium, 14px);
18
+ font-weight: var(--base-text-weight-semibold, 600);
19
+ line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
20
+ color: var(--color-fg-default);
21
+ user-select: none;
22
+ }
23
+
24
+ /* optional caption */
25
+ .FormControl-caption {
26
+ margin-bottom: 0;
27
+ font-size: var(--primer-text-caption-size, 12px);
28
+ font-weight: var(--primer-text-caption-weight, 400);
29
+ line-height: var(--primer-text-caption-lineHeight, calc(16 / 12));
30
+ color: var(--color-fg-muted);
31
+ }
32
+
33
+ /* inline validation message */
34
+ .FormControl-inlineValidation {
35
+ display: flex;
36
+ font-size: var(--primer-text-caption-size, 12px);
37
+ font-weight: var(--base-text-weight-semibold, 600);
38
+ color: var(--color-danger-fg);
39
+ fill: var(--color-danger-fg);
40
+ flex-direction: row;
41
+ align-items: center;
42
+ gap: var(--base-size-4, 4px);
43
+
44
+ & p {
45
+ margin-bottom: 0;
46
+ }
47
+ }
48
+
49
+ /* shared among all form control components (input, select, textarea, checkbox, radio) */
50
+ @define-mixin Field {
51
+ color: var(--color-fg-default);
52
+ background-color: var(--color-canvas-default);
53
+ border: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
54
+
55
+ &[disabled] {
56
+ color: var(--color-primer-fg-disabled);
57
+ cursor: not-allowed;
58
+ background-color: var(--color-input-disabled-bg);
59
+ border-color: var(--color-border-default);
60
+ opacity: 1;
61
+ -webkit-text-fill-color: var(--color-primer-fg-disabled);
62
+ }
63
+
64
+ &:not(:focus)[invalid] {
65
+ border-color: var(--color-danger-emphasis);
66
+ }
67
+
68
+ &:not([type='checkbox'], [type='radio']):focus {
69
+ @mixin focusBoxShadowInset;
70
+
71
+ /* remove fallback :focus if :focus-visible is supported */
72
+ &:not(:focus-visible) {
73
+ border-color: transparent;
74
+
75
+ @mixin focusBoxShadowInset 1px transparent;
76
+ }
77
+ }
78
+
79
+ /* default focus state */
80
+ &:not([type='checkbox'], [type='radio']):focus-visible {
81
+ @mixin focusBoxShadowInset;
82
+ }
83
+ }
84
+
85
+ /* TextInput structure
86
+ ** ===================
87
+ **
88
+ ** .FormControl
89
+ ** ├─ .FormControl-label
90
+ ** │ ├─ .FormControl-input-wrap
91
+ ** │ │ ├─ .FormControl-input-leadingVisualWrap
92
+ ** │ │ │ ├─ .FormControl-input-leadingVisual
93
+ ** │ │ ├─ .FormControl-input
94
+ ** │ │ ├─ .FormControl-input-trailingAction
95
+ ** ├─ .FormControl-inlineValidation
96
+ ** ├─ .FormControl-caption */
97
+
98
+ /* // Select structure
99
+ ** ===================
100
+ **
101
+ ** .FormControl
102
+ ** ├─ .FormControl-label
103
+ ** │ ├─ .FormControl-select-wrap
104
+ ** │ │ ├─ .FormControl-select
105
+ ** ├─ .FormControl-inlineValidation
106
+ ** ├─ .FormControl-caption */
107
+
108
+ /* // Textarea structure
109
+ ** ===================
110
+ **
111
+ ** .FormControl
112
+ ** ├─ .FormControl-label
113
+ ** ├─ .FormControl-textarea
114
+ ** ├─ .FormControl-inlineValidation
115
+ ** ├─ .FormControl-caption */
116
+
117
+ .FormControl-input,
118
+ .FormControl-select,
119
+ .FormControl-textarea {
120
+ @mixin Field;
121
+
122
+ width: 100%;
123
+ font-size: var(--primer-text-body-size-medium, 14px);
124
+ line-height: var(--primer-text-body-lineHeight-medium, calc(20 / 14));
125
+ border-radius: var(--primer-borderRadius-medium, 6px);
126
+ transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
127
+ transition-property: color, background-color, box-shadow, border-color;
128
+ padding-inline: var(--primer-control-medium-paddingInline-condensed, 8px);
129
+ padding-block: calc(var(--primer-control-medium-paddingBlock, 6px) - var(--primer-borderWidth-thin, 1px));
130
+
131
+ &[disabled] {
132
+ &::placeholder {
133
+ color: var(--color-primer-fg-disabled);
134
+ }
135
+ }
136
+
137
+ &[readonly] {
138
+ background-color: var(--color-input-disabled-bg);
139
+ }
140
+
141
+ &::placeholder {
142
+ color: var(--color-fg-subtle);
143
+ opacity: 1;
144
+ }
145
+
146
+ /* sizes */
147
+
148
+ &.FormControl-small {
149
+ height: var(--primer-control-small-size, 28px);
150
+ padding-inline: var(--primer-control-small-paddingInline-normal, 8px);
151
+ padding-block: var(--primer-control-small-paddingBlock, 4px);
152
+ font-size: var(--primer-text-body-size-small, 12px);
153
+ }
154
+
155
+ &.FormControl-medium {
156
+ height: var(--primer-control-medium-size, 32px);
157
+ }
158
+
159
+ &.FormControl-large {
160
+ height: var(--primer-control-large-size, 40px);
161
+ padding-inline: var(--primer-control-large-paddingInline-normal, 12px);
162
+ padding-block: var(--primer-control-large-paddingBlock, 10px);
163
+ }
164
+
165
+ /* variants */
166
+
167
+ &.FormControl-inset {
168
+ background-color: var(--color-canvas-inset);
169
+
170
+ &:focus-visible,
171
+ &:focus {
172
+ background-color: var(--color-canvas-default);
173
+ }
174
+ }
175
+
176
+ &.FormControl-monospace {
177
+ font-family:
178
+ var(
179
+ --primer-fontStack-monospace,
180
+ 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
181
+ );
182
+ }
183
+
184
+ /* validation states */
185
+
186
+ &.FormControl-error {
187
+ border-color: var(--color-danger-emphasis);
188
+ }
189
+
190
+ &.FormControl-success {
191
+ border-color: var(--color-success-emphasis);
192
+ }
193
+
194
+ &.FormControl-warning {
195
+ border-color: var(--color-attention-emphasis);
196
+ }
197
+ }
198
+
199
+ /* positioning for leading/trailing items for TextInput */
200
+ .FormControl-input-wrap {
201
+ position: relative;
202
+ display: grid;
203
+
204
+ & .FormControl-input-leadingVisualWrap {
205
+ position: absolute;
206
+ top: var(--base-size-8, 8px);
207
+ left: var(--base-size-8, 8px);
208
+ display: block;
209
+ width: var(--base-size-16, 16px);
210
+ height: var(--base-size-16, 16px);
211
+ color: var(--color-fg-muted);
212
+ pointer-events: none;
213
+
214
+ /* octicon */
215
+ & .FormControl-input-leadingVisual {
216
+ display: block;
217
+ user-select: none;
218
+ }
219
+ }
220
+
221
+ /* TODO: replace with new Button component */
222
+ & .FormControl-input-trailingAction {
223
+ position: absolute;
224
+ top: var(--base-size-4, 4px);
225
+ right: var(--base-size-4, 4px);
226
+ z-index: 4;
227
+ display: grid;
228
+ width: var(--primer-control-xsmall-size, 24px);
229
+ height: var(--primer-control-xsmall-size, 24px);
230
+ padding: 0;
231
+ color: var(--color-fg-muted);
232
+ cursor: pointer;
233
+ background: transparent;
234
+ border: 0;
235
+ border-radius: var(--primer-borderRadius-small);
236
+ transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
237
+ transition-property: color, background-color, border-color;
238
+ align-items: center;
239
+ justify-content: center;
240
+
241
+ & svg {
242
+ user-select: none;
243
+ }
244
+
245
+ &[disabled] {
246
+ color: var(--color-primer-fg-disabled);
247
+ pointer-events: none;
248
+ }
249
+
250
+ &:hover {
251
+ background: var(--color-action-list-item-default-hover-bg);
252
+ }
253
+
254
+ &:active {
255
+ background: var(--color-action-list-item-default-active-bg);
256
+ }
257
+
258
+ /* show vertical divider line between field and button */
259
+ &.FormControl-input-trailingAction--divider {
260
+ &::before {
261
+ position: absolute;
262
+ top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 2);
263
+ left: calc(var(--base-size-4, 4px) * -1);
264
+ display: block;
265
+ width: var(--primer-borderWidth-thin);
266
+ height: var(--base-size-16);
267
+ content: '';
268
+ background: var(--color-border-default);
269
+ }
270
+ }
271
+
272
+ &::after {
273
+ @mixin minTouchTarget var(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
274
+
275
+ @media (pointer: coarse) {
276
+ min-width: var(--primer-control-minTarget-coarse, 44px);
277
+ min-height: var(--primer-control-minTarget-coarse, 44px);
278
+ }
279
+ }
280
+ }
281
+
282
+ /* if leadingVisual is present */
283
+
284
+ /*
285
+ ┌──32px──┬────────────────────┐
286
+ ╎ ┌───┐ ┌────────────────┐ ╎
287
+ ╎ 16px 16px ╎
288
+ ╎ └───┘ └────────────────┘ ╎
289
+ └───────8px───────────────────┘
290
+ */
291
+
292
+ &.FormControl-input-wrap--leadingVisual {
293
+ & .FormControl-input {
294
+ padding-inline-start:
295
+ calc(
296
+ var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
297
+ var(--primer-control-medium-gap, 8px)
298
+ ); /* 32px */
299
+ }
300
+ }
301
+
302
+ /*
303
+ ┌──────────────────┬──32px──┐
304
+ ╎ ┌──────────────┐ ┌────┐ ╎
305
+ ╎ 24px 24px ╎
306
+ ╎ └──────────────┘ └────┘ ╎
307
+ └──────────────────┴────────┘
308
+ */
309
+
310
+ /* if trailingAction is present */
311
+ &.FormControl-input-wrap--trailingAction {
312
+ & .FormControl-input {
313
+ padding-inline-end:
314
+ calc(
315
+ var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
316
+ var(--primer-control-medium-gap, 8px)
317
+ ); /* 32px */
318
+ }
319
+
320
+ /*
321
+ 32px + 1px border
322
+ ┌──────────────────┬──33px──┐
323
+ ╎ ┌──────────────┐ ┌────┐ ╎
324
+ ╎ 24px 24px ╎
325
+ ╎ └──────────────┘ └────┘ ╎
326
+ └──────────────────┴────────┘
327
+ */
328
+
329
+ /* if trailingAction divider is present, add 1px padding to accomodate input field text
330
+ ** can be refactored to has(.FormControl-input-trailingAction--divider) */
331
+ &.FormControl-input-wrap-trailingAction--divider {
332
+ & .FormControl-input {
333
+ padding-inline-end:
334
+ calc(
335
+ var(--primer-control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
336
+ var(--primer-control-medium-gap, 8px) + var(--primer-borderWidth-thin, 1px)
337
+ ); /* 33px */
338
+ }
339
+ }
340
+ }
341
+
342
+ /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
343
+ // sizes */
344
+ &.FormControl-small {
345
+ & .FormControl-input-leadingVisualWrap {
346
+ top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
347
+ left: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
348
+ }
349
+
350
+ /*
351
+ ┌──────────────────┬──28px──┐
352
+ ╎ ┌──────────────┐ ┌────┐ ╎
353
+ ╎ 20px 20px ╎
354
+ ╎ └──────────────┘ └────┘ ╎
355
+ └──────────────────┴────────┘
356
+ */
357
+
358
+ &.FormControl-input-wrap--trailingAction {
359
+ & .FormControl-input.FormControl-small {
360
+ padding-inline-end:
361
+ calc(
362
+ var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
363
+ var(--primer-control-small-gap, 8px)
364
+ ); /* 28px */
365
+ }
366
+
367
+ /*
368
+ 28px + 1px border
369
+ ┌──────────────────┬──29px──┐
370
+ ╎ ┌──────────────┐ ┌────┐ ╎
371
+ ╎ 20px 20px ╎
372
+ ╎ └──────────────┘ └────┘ ╎
373
+ └──────────────────┴────────┘
374
+ */
375
+
376
+ &.FormControl-input-wrap-trailingAction--divider {
377
+ & .FormControl-input.FormControl-small {
378
+ padding-inline-end:
379
+ calc(
380
+ var(--primer-control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
381
+ var(--primer-control-small-gap, 8px) + var(--primer-borderWidth-thin, 1px)
382
+ ); /* 29px */
383
+ }
384
+ }
385
+ }
386
+
387
+ & .FormControl-input-trailingAction {
388
+ width: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
389
+ height: calc(var(--primer-control-small-size, 28px) - var(--base-size-8, 8px));
390
+
391
+ &::before {
392
+ top: calc((var(--primer-control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
393
+ }
394
+ }
395
+ }
396
+
397
+ &.FormControl-large {
398
+ & .FormControl-input-leadingVisualWrap {
399
+ top: var(--primer-control-medium-paddingInline-normal, 12px);
400
+ left: var(--primer-control-medium-paddingInline-normal, 12px);
401
+ }
402
+
403
+ /*
404
+ ┌──36px──┬───12px padding──────┐
405
+ ╎ ┌───┐ ┌────────────────┐ ╎
406
+ ╎ 16px 16px ╎
407
+ ╎ └───┘ └────────────────┘ ╎
408
+ └12px───8px───────────────────┘
409
+ */
410
+
411
+ &.FormControl-input-wrap--leadingVisual {
412
+ & .FormControl-input.FormControl-large {
413
+ padding-inline-start:
414
+ calc(
415
+ var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
416
+ var(--primer-control-large-gap, 8px)
417
+ ); /* 36px */
418
+ }
419
+ }
420
+
421
+ /*
422
+ ┌──────────────────┬──36px──┐
423
+ ╎ ┌──────────────┐ ┌────┐ ╎
424
+ ╎ 28px 28px ╎
425
+ ╎ └──────────────┘ └────┘ ╎
426
+ └──────────────────┴────────┘
427
+ */
428
+
429
+ &.FormControl-input-wrap--trailingAction {
430
+ & .FormControl-input.FormControl-large {
431
+ padding-inline-end:
432
+ calc(
433
+ var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
434
+ var(--primer-control-large-gap, 8px)
435
+ ); /* 36px */
436
+ }
437
+
438
+ /*
439
+ ┌──────────────────┬──37px──┐
440
+ ╎ ┌──────────────┐ ┌────┐ ╎
441
+ ╎ 28px 28px ╎
442
+ ╎ └──────────────┘ └────┘ ╎
443
+ └──────────────────┴────────┘
444
+ */
445
+
446
+ &.FormControl-input-wrap-trailingAction--divider {
447
+ & .FormControl-input.FormControl-large {
448
+ padding-inline-end:
449
+ calc(
450
+ var(--primer-control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) +
451
+ var(--primer-control-large-gap, 8px) + var(--primer-borderWidth-thin, 1px)
452
+ ); /* 37px */
453
+ }
454
+ }
455
+ }
456
+
457
+ & .FormControl-input-trailingAction {
458
+ top: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
459
+ right: calc(var(--primer-control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
460
+ width: var(--primer-control-small-size, 28px);
461
+ height: var(--primer-control-small-size, 28px);
462
+
463
+ &::before {
464
+ top: unset;
465
+ height: var(--base-size-20);
466
+ }
467
+ }
468
+ }
469
+ }
470
+
471
+ .FormControl-select-wrap {
472
+ display: grid;
473
+ grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
474
+
475
+ /* mask allows for background-color to respect themes */
476
+ &::after {
477
+ width: var(--base-size-16, 16px);
478
+ height: var(--base-size-16, 16px);
479
+ padding-right: var(--base-size-4, 4px);
480
+ pointer-events: none;
481
+ content: '';
482
+ background-color: var(--color-fg-muted);
483
+ mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
484
+ mask-size: contain;
485
+ mask-repeat: no-repeat;
486
+ grid-column: 2;
487
+ grid-row: 1;
488
+ place-self: center end;
489
+ }
490
+
491
+ /* spans entire grid below mask */
492
+ & .FormControl-select {
493
+ grid-column: 1/-1;
494
+ grid-row: 1;
495
+ appearance: none;
496
+ padding-right: var(--base-size-20, 20px);
497
+ }
498
+ }
499
+
500
+ /* checkbox + radio specific styles */
501
+
502
+ /* // Checkbox + Radio structure
503
+ ** ===================
504
+ **
505
+ ** .FormControl-radio-wrap
506
+ ** ├─ .FormControl-radio
507
+ ** ├─ .FormControl-radio-labelWrap
508
+ ** │ ├─ .FormControl-label
509
+ ** │ ├─ .FormControl-caption */
510
+
511
+ .FormControl-checkbox-wrap,
512
+ .FormControl-radio-wrap {
513
+ display: inline-grid;
514
+ grid-template-columns: min-content auto;
515
+ gap: var(--base-size-8, 8px);
516
+
517
+ & .FormControl-checkbox-labelWrap,
518
+ & .FormControl-radio-labelWrap {
519
+ display: flex;
520
+ flex-direction: column;
521
+ gap: var(--base-size-4, 4px);
522
+ }
523
+
524
+ & .FormControl-label {
525
+ cursor: pointer;
526
+ }
527
+ }
528
+
529
+ /* these selectors are temporary to override base.scss
530
+ ** once Field styles are widely adopted, we can adjust this and the global base styles */
531
+ input[type='checkbox'].FormControl-checkbox {
532
+ @mixin Field;
533
+
534
+ position: relative;
535
+ display: grid;
536
+ width: var(--base-size-16, 16px);
537
+ height: var(--base-size-16, 16px);
538
+ margin: 0;
539
+ margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
540
+ cursor: pointer;
541
+ border-color: var(--color-neutral-emphasis);
542
+ border-radius: var(--primer-borderRadius-small, 3px);
543
+ transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
544
+ appearance: none;
545
+ place-content: center;
546
+
547
+ &::before {
548
+ width: var(--base-size-16, 16px);
549
+ height: var(--base-size-16, 16px);
550
+ visibility: hidden;
551
+ content: '';
552
+ background-color: var(--color-fg-on-emphasis);
553
+ transition: visibility 0s linear 230ms;
554
+ clip-path: inset(var(--base-size-16, 16px) 0 0 0);
555
+
556
+ /* octicon checkmark image */
557
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
558
+ mask-size: 75%;
559
+ mask-repeat: no-repeat;
560
+ mask-position: center;
561
+
562
+ @media screen and (prefers-reduced-motion: no-preference) {
563
+ animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
564
+ }
565
+ }
566
+
567
+ /* extend touch target */
568
+ &::after {
569
+ @mixin minTouchTarget var(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
570
+ }
571
+
572
+ &[disabled] {
573
+ & ~ .FormControl-checkbox-labelWrap,
574
+ & ~ .FormControl-radio-labelWrap {
575
+ & .FormControl-label {
576
+ color: var(--color-primer-fg-disabled);
577
+ cursor: not-allowed;
578
+ }
579
+ }
580
+ }
581
+
582
+ &:checked {
583
+ background: var(--color-accent-fg);
584
+ border-color: var(--color-accent-fg);
585
+ transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
586
+
587
+ &::before {
588
+ visibility: visible;
589
+ transition: visibility 0s linear 0s;
590
+
591
+ @media screen and (prefers-reduced-motion: no-preference) {
592
+ animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
593
+ }
594
+ }
595
+
596
+ &:disabled {
597
+ cursor: not-allowed;
598
+ background-color: var(--color-primer-fg-disabled);
599
+ border-color: var(--color-primer-fg-disabled);
600
+ opacity: 1;
601
+
602
+ &::before {
603
+ background-color: var(--color-fg-on-emphasis);
604
+ }
605
+ }
606
+
607
+ /* Windows High Contrast mode */
608
+ @media (forced-colors: active) {
609
+ background-color: canvastext;
610
+ border-color: canvastext;
611
+ }
612
+ }
613
+
614
+ &:focus-visible {
615
+ @mixin focusOutline 2px;
616
+ }
617
+
618
+ &:indeterminate {
619
+ &::before {
620
+ mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
621
+ visibility: visible;
622
+ }
623
+ }
624
+ }
625
+
626
+ input[type='radio'].FormControl-radio {
627
+ @mixin Field;
628
+
629
+ position: relative;
630
+ width: var(--base-size-16, 16px);
631
+ height: var(--base-size-16, 16px);
632
+ margin: 0;
633
+ margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
634
+ cursor: pointer;
635
+ border-color: var(--color-neutral-emphasis);
636
+ border-radius: var(--primer-borderRadius-full, 100vh);
637
+ transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
638
+ appearance: none;
639
+
640
+ &::after {
641
+ @mixin minTouchTarget var(--primer-control-medium-size, 32px) var(--primer-control-medium-size, 32px);
642
+ }
643
+
644
+ &:checked {
645
+ border-color: var(--color-accent-fg);
646
+ border-width: var(--base-size-4, 4px);
647
+
648
+ &:disabled {
649
+ cursor: not-allowed;
650
+ border-color: var(--color-primer-fg-disabled);
651
+ }
652
+ }
653
+
654
+ &:focus-visible {
655
+ @mixin focusOutline 2px;
656
+ }
657
+
658
+ /* Windows High Contrast mode */
659
+ @media (forced-colors: active) {
660
+ background-color: canvastext;
661
+ border-color: canvastext;
662
+ }
663
+ }
664
+
665
+ @keyframes checkmarkIn {
666
+ from {
667
+ clip-path: inset(var(--base-size-16, 16px) 0 0 0);
668
+ }
669
+
670
+ to {
671
+ clip-path: inset(0 0 0 0);
672
+ }
673
+ }
674
+
675
+ @keyframes checkmarkOut {
676
+ from {
677
+ clip-path: inset(0 0 0 0);
678
+ }
679
+
680
+ to {
681
+ clip-path: inset(var(--base-size-16, 16px) 0 0 0);
682
+ }
683
+ }
@@ -19,7 +19,7 @@ declare class ToggleSwitchElement extends HTMLElement {
19
19
  private setSuccessState;
20
20
  private setErrorState;
21
21
  private setFinishedState;
22
- private check;
22
+ private submitForm;
23
23
  }
24
24
  declare global {
25
25
  interface Window {