primer_view_components 0.1.9 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -3
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list/item.rb +2 -2
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +16 -16
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.pcss +145 -145
  13. data/app/components/primer/alpha/action_list.rb +30 -15
  14. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -1
  15. data/app/components/primer/alpha/action_menu/action_menu_element.js +44 -34
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +32 -30
  17. data/app/components/primer/alpha/action_menu/list.rb +6 -1
  18. data/app/components/primer/alpha/auto_complete.css +1 -1
  19. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  20. data/app/components/primer/alpha/auto_complete.pcss +3 -3
  21. data/app/components/primer/alpha/banner.css +1 -1
  22. data/app/components/primer/alpha/banner.css.map +1 -1
  23. data/app/components/primer/alpha/banner.pcss +11 -11
  24. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  25. data/app/components/primer/alpha/button_marketing.pcss +5 -12
  26. data/app/components/primer/alpha/button_marketing.rb +3 -0
  27. data/app/components/primer/alpha/dialog.css +1 -1
  28. data/app/components/primer/alpha/dialog.css.map +1 -1
  29. data/app/components/primer/alpha/dialog.pcss +36 -36
  30. data/app/components/primer/alpha/dropdown.css +1 -1
  31. data/app/components/primer/alpha/dropdown.css.map +1 -1
  32. data/app/components/primer/alpha/dropdown.pcss +12 -12
  33. data/app/components/primer/alpha/form_control.html.erb +1 -1
  34. data/app/components/primer/alpha/hellip_button.rb +3 -1
  35. data/app/components/primer/alpha/layout.css +1 -1
  36. data/app/components/primer/alpha/layout.css.map +1 -1
  37. data/app/components/primer/alpha/layout.pcss +4 -4
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.pcss +21 -21
  41. data/app/components/primer/alpha/modal_dialog.js +11 -4
  42. data/app/components/primer/alpha/modal_dialog.ts +11 -4
  43. data/app/components/primer/alpha/nav_list/item.rb +2 -0
  44. data/app/components/primer/alpha/nav_list.js +6 -0
  45. data/app/components/primer/alpha/nav_list.rb +55 -36
  46. data/app/components/primer/alpha/nav_list.ts +8 -0
  47. data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
  48. data/app/components/primer/alpha/overlay.css +1 -1
  49. data/app/components/primer/alpha/overlay.css.json +1 -2
  50. data/app/components/primer/alpha/overlay.css.map +1 -1
  51. data/app/components/primer/alpha/overlay.pcss +14 -4
  52. data/app/components/primer/alpha/segmented_control.css +1 -1
  53. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  54. data/app/components/primer/alpha/segmented_control.pcss +24 -33
  55. data/app/components/primer/alpha/tab_nav.css +1 -1
  56. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  57. data/app/components/primer/alpha/tab_nav.pcss +12 -12
  58. data/app/components/primer/alpha/text_field.css +1 -3
  59. data/app/components/primer/alpha/text_field.css.json +1 -0
  60. data/app/components/primer/alpha/text_field.css.map +1 -1
  61. data/app/components/primer/alpha/text_field.pcss +87 -83
  62. data/app/components/primer/alpha/toggle_switch.css +1 -1
  63. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  64. data/app/components/primer/alpha/toggle_switch.pcss +12 -12
  65. data/app/components/primer/alpha/underline_nav.css +1 -1
  66. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  67. data/app/components/primer/alpha/underline_nav.pcss +11 -11
  68. data/app/components/primer/beta/avatar.css +1 -1
  69. data/app/components/primer/beta/avatar.css.map +1 -1
  70. data/app/components/primer/beta/avatar.pcss +18 -18
  71. data/app/components/primer/beta/avatar_stack.css +1 -1
  72. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  73. data/app/components/primer/beta/avatar_stack.pcss +5 -5
  74. data/app/components/primer/beta/base_button.rb +11 -0
  75. data/app/components/primer/beta/blankslate.css +1 -1
  76. data/app/components/primer/beta/blankslate.css.map +1 -1
  77. data/app/components/primer/beta/blankslate.pcss +16 -16
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.json +1 -1
  80. data/app/components/primer/beta/border_box.css.map +1 -1
  81. data/app/components/primer/beta/border_box.pcss +40 -42
  82. data/app/components/primer/beta/button.css +1 -1
  83. data/app/components/primer/beta/button.css.json +4 -0
  84. data/app/components/primer/beta/button.css.map +1 -1
  85. data/app/components/primer/beta/button.pcss +39 -24
  86. data/app/components/primer/beta/button.rb +3 -0
  87. data/app/components/primer/beta/button_group.css +1 -0
  88. data/app/components/primer/beta/button_group.css.json +14 -0
  89. data/app/components/primer/beta/button_group.css.map +1 -0
  90. data/app/components/primer/beta/button_group.pcss +27 -0
  91. data/app/components/primer/beta/button_group.rb +19 -19
  92. data/app/components/primer/beta/close_button.rb +3 -1
  93. data/app/components/primer/beta/counter.css +1 -1
  94. data/app/components/primer/beta/counter.css.map +1 -1
  95. data/app/components/primer/beta/counter.pcss +5 -5
  96. data/app/components/primer/beta/details.html.erb +6 -2
  97. data/app/components/primer/beta/details.rb +18 -10
  98. data/app/components/primer/beta/flash.css +1 -1
  99. data/app/components/primer/beta/flash.css.map +1 -1
  100. data/app/components/primer/beta/flash.pcss +12 -12
  101. data/app/components/primer/beta/icon_button.rb +7 -3
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.pcss +3 -3
  105. data/app/components/primer/beta/popover.css +1 -1
  106. data/app/components/primer/beta/popover.css.map +1 -1
  107. data/app/components/primer/beta/popover.pcss +4 -4
  108. data/app/components/primer/beta/state.css +1 -1
  109. data/app/components/primer/beta/state.css.map +1 -1
  110. data/app/components/primer/beta/state.pcss +7 -7
  111. data/app/components/primer/beta/subhead.css +1 -1
  112. data/app/components/primer/beta/subhead.css.map +1 -1
  113. data/app/components/primer/beta/subhead.pcss +9 -9
  114. data/app/components/primer/beta/timeline_item.css +1 -1
  115. data/app/components/primer/beta/timeline_item.css.map +1 -1
  116. data/app/components/primer/beta/timeline_item.pcss +18 -18
  117. data/app/components/primer/beta/truncate.css +1 -1
  118. data/app/components/primer/beta/truncate.css.map +1 -1
  119. data/app/components/primer/beta/truncate.pcss +1 -1
  120. data/app/components/primer/focus_group.js +1 -10
  121. data/app/components/primer/focus_group.ts +1 -10
  122. data/app/components/primer/primer.d.ts +1 -0
  123. data/app/components/primer/primer.js +1 -0
  124. data/app/components/primer/primer.pcss +1 -0
  125. data/app/components/primer/primer.ts +1 -0
  126. data/lib/postcss_mixins/activeIndicatorLine.pcss +4 -4
  127. data/lib/primer/accessibility.rb +74 -0
  128. data/lib/primer/forms/form_control.html.erb +1 -1
  129. data/lib/primer/static/generate_previews.rb +15 -8
  130. data/lib/primer/view_components/linters/deprecated_components_counter.rb +37 -13
  131. data/lib/primer/view_components/version.rb +2 -2
  132. data/lib/primer/yard/lookbook_pages_backend.rb +3 -3
  133. data/previews/pages/forms/03_caption_templates.md.erb +1 -1
  134. data/previews/pages/forms/04_after_content.md.erb +1 -1
  135. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +1 -1
  136. data/previews/pages/forms/07_toggle_switch_forms.md.erb +1 -1
  137. data/previews/primer/alpha/action_menu_preview/two_menus.html.erb +13 -0
  138. data/previews/primer/alpha/action_menu_preview/with_actions.html.erb +21 -0
  139. data/previews/primer/alpha/action_menu_preview.rb +5 -13
  140. data/previews/primer/alpha/button_marketing_preview.rb +3 -2
  141. data/previews/primer/alpha/dialog_preview.rb +4 -3
  142. data/previews/primer/alpha/hellip_button_preview.rb +3 -2
  143. data/previews/primer/alpha/nav_list_preview.rb +1 -1
  144. data/previews/primer/beta/base_button_preview.rb +9 -2
  145. data/previews/primer/beta/button_group_preview/action_menus.html.erb +8 -0
  146. data/previews/primer/beta/button_group_preview.rb +49 -11
  147. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +5 -2
  149. data/previews/primer/beta/close_button_preview.rb +3 -2
  150. data/previews/primer/beta/details_preview.rb +11 -8
  151. data/previews/primer/forms_preview.rb +44 -0
  152. data/static/arguments.json +4 -4
  153. data/static/classes.json +378 -372
  154. data/static/constants.json +0 -1
  155. data/static/info_arch.json +5150 -1368
  156. data/static/previews.json +5197 -1433
  157. metadata +37 -29
  158. data/previews/primer/forms/forms_preview.rb +0 -48
  159. /data/previews/primer/{forms/forms_preview → forms_preview}/after_content_form.html.erb +0 -0
  160. /data/previews/primer/{forms/forms_preview → forms_preview}/array_check_box_group_form.html.erb +0 -0
  161. /data/previews/primer/{forms/forms_preview → forms_preview}/caption_template_form.html.erb +0 -0
  162. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_group_form.html.erb +0 -0
  163. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_with_nested_form.html.erb +0 -0
  164. /data/previews/primer/{forms/forms_preview → forms_preview}/composed_form.html.erb +0 -0
  165. /data/previews/primer/{forms/forms_preview → forms_preview}/example_toggle_switch_form.html.erb +0 -0
  166. /data/previews/primer/{forms/forms_preview → forms_preview}/horizontal_form.html.erb +0 -0
  167. /data/previews/primer/{forms/forms_preview → forms_preview}/immediate_validation_form.html.erb +0 -0
  168. /data/previews/primer/{forms/forms_preview → forms_preview}/invalid_form.html.erb +0 -0
  169. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_input_form.html.erb +0 -0
  170. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_text_field_form.html.erb +0 -0
  171. /data/previews/primer/{forms/forms_preview → forms_preview}/name_with_question_mark_form.html.erb +0 -0
  172. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_group_form.html.erb +0 -0
  173. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_with_nested_form.html.erb +0 -0
  174. /data/previews/primer/{forms/forms_preview → forms_preview}/select_form.html.erb +0 -0
  175. /data/previews/primer/{forms/forms_preview → forms_preview}/single_text_field_form.html.erb +0 -0
  176. /data/previews/primer/{forms/forms_preview → forms_preview}/submit_button_form.html.erb +0 -0
  177. /data/previews/primer/{forms/forms_preview → forms_preview}/text_field_and_checkbox_form.html.erb +0 -0
data/app/components/primer/alpha/tab_nav.pcss CHANGED
@@ -3,26 +3,26 @@
3
3
  /* Outer wrapper */
4
4
  .tabnav {
5
5
  margin-top: 0;
6
- margin-bottom: var(--stack-gap-normal, 16px);
7
- border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);
6
+ margin-bottom: var(--stack-gap-normal);
7
+ border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
8
8
  }
9
9
 
10
10
  .tabnav-tabs {
11
11
  display: flex;
12
- margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);
12
+ margin-bottom: calc(var(--borderWidth-thin) * -1);
13
13
  overflow: auto;
14
14
  }
15
15
 
16
16
  .tabnav-tab {
17
17
  display: inline-block;
18
18
  flex-shrink: 0;
19
- padding: var(--base-size-8, 8px) var(--control-medium-paddingInline-spacious, 16px);
20
- font-size: var(--text-body-size-medium, 14px);
19
+ padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
20
+ font-size: var(--text-body-size-medium);
21
21
  line-height: 23px;
22
22
  color: var(--color-fg-muted);
23
23
  text-decoration: none;
24
24
  background-color: transparent;
25
- border: var(--borderWidth-thin, 1px) solid transparent;
25
+ border: var(--borderWidth-thin) solid transparent;
26
26
  border-bottom: 0;
27
27
  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
28
28
 
@@ -32,7 +32,7 @@
32
32
  color: var(--color-fg-default);
33
33
  background-color: var(--color-canvas-default); /* cover bottom border */
34
34
  border-color: var(--color-border-default);
35
- border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0;
35
+ border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
36
36
 
37
37
  & .octicon {
38
38
  color: inherit;
@@ -47,7 +47,7 @@
47
47
 
48
48
  &:focus,
49
49
  &:focus-visible {
50
- border-radius: var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px) 0 0 !important;
50
+ border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;
51
51
  outline-offset: -6px;
52
52
  }
53
53
 
@@ -56,12 +56,12 @@
56
56
  }
57
57
 
58
58
  & .octicon {
59
- margin-right: var(--control-small-gap, 4px);
59
+ margin-right: var(--control-small-gap);
60
60
  color: var(--color-fg-muted);
61
61
  }
62
62
 
63
63
  & .Counter {
64
- margin-left: var(--control-small-gap, 4px);
64
+ margin-left: var(--control-small-gap);
65
65
  color: inherit;
66
66
  }
67
67
  }
@@ -75,7 +75,7 @@
75
75
  display: inline-block;
76
76
  padding-top: 10px;
77
77
  margin-left: 10px;
78
- font-size: var(--text-body-size-small, 12px);
78
+ font-size: var(--text-body-size-small);
79
79
  color: var(--color-fg-muted);
80
80
 
81
81
  & > .octicon {
@@ -96,5 +96,5 @@ a.tabnav-extra:hover {
96
96
  ** the buttons to be floated or inline-block. */
97
97
 
98
98
  .tabnav-btn {
99
- margin-left: var(--controlStack-medium-gap-condensed, 8px);
99
+ margin-left: var(--controlStack-medium-gap-condensed);
100
100
  }
data/app/components/primer/alpha/text_field.css CHANGED
@@ -1,3 +1 @@
1
- .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--color-fg-muted);font-size:var(--text-caption-size,12px);font-weight:var(--text-caption-weight,400);line-height:var(--text-caption-lineHeight,1.33333);margin-bottom:0}.FormControl-inlineValidation{fill:var(--color-danger-fg);align-items:center;color:var(--color-danger-fg);display:flex;flex-direction:row;font-size:var(--text-caption-size,12px);font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,4px)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--color-danger-emphasis)}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);line-height:var(--text-body-lineHeight-medium,1.42857);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,8px);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--color-primer-fg-disabled)}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--color-input-disabled-bg)}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--color-fg-subtle);opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,12px);height:var(--control-small-size,28px);padding-block:var(--control-small-paddingBlock,4px);padding-inline:var(--control-small-paddingInline-normal,8px)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,32px)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,40px);padding-block:var(--control-large-paddingBlock,10px);padding-inline:var(--control-large-paddingInline-normal,12px)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--color-canvas-inset)}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--color-canvas-default)}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(
2
- --fontStack-monospace,"ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
3
- )}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--color-danger-emphasis)}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--color-success-emphasis)}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--color-attention-emphasis)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,16px)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--color-fg-muted);display:block;height:var(--base-size-16,16px);left:var(--base-size-8,8px);pointer-events:none;position:absolute;top:var(--base-size-8,8px);width:var(--base-size-16,16px)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--color-fg-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size,24px);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,4px);top:var(--base-size-4,4px);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,24px);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--color-primer-fg-disabled);pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--color-action-list-item-default-hover-bg)}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--color-action-list-item-default-active-bg)}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--color-border-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4, 4px)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,44px);min-width:var(--control-minTarget-coarse,44px)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));width:calc(var(--control-small-size, 28px) - var(--base-size-8, 8px))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,12px);top:var(--control-medium-paddingInline-normal,12px)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) + var(--borderWidth-thin, 1px))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,28px);right:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);top:calc(var(--control-medium-paddingInline-condensed, 8px) - .125rem);width:var(--control-small-size,28px)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,16px)}.FormControl-select-wrap:after{background-color:var(--color-fg-muted);content:"";grid-column:2;grid-row:1;height:var(--base-size-16,16px);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,4px);place-self:center end;pointer-events:none;width:var(--base-size-16,16px)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,20px)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,8px);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,4px)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,16px);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--color-fg-on-emphasis);clip-path:inset(var(--base-size-16,16px) 0 0 0);content:"";height:var(--base-size-16,16px);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,16px)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--color-accent-fg);border-color:var(--color-accent-fg);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--color-primer-fg-disabled);border-color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--color-fg-on-emphasis)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-full,100vh);cursor:pointer;height:var(--base-size-16,16px);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,16px)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,32px) var(--control-medium-size,32px);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--color-accent-fg);border-width:var(--base-size-4,4px)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,16px) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,16px) 0 0 0)}}
1
+ .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--color-fg-default);font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.42857);-webkit-user-select:none;user-select:none}.FormControl-caption{color:var(--color-fg-muted);font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.33333)}.FormControl-inlineValidation{fill:var(--color-danger-fg);align-items:flex-start;color:var(--color-danger-fg);display:flex;flex-direction:row;font-weight:var(--base-text-weight-semibold,600);gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);color:var(--color-fg-default)}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}.FormControl-input[invalid]:not(:focus),.FormControl-select[invalid]:not(:focus),.FormControl-textarea[invalid]:not(:focus){border-color:var(--color-danger-emphasis)}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.42857);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--color-primer-fg-disabled)}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--color-input-disabled-bg)}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--color-fg-subtle);opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--color-canvas-inset)}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--color-canvas-default)}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--color-danger-emphasis)}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--color-success-emphasis)}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--color-attention-emphasis)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--color-fg-muted);display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,3px);color:var(--color-fg-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--color-primer-fg-disabled);pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--color-action-list-item-default-hover-bg)}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--color-action-list-item-default-active-bg)}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--color-border-default);content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--color-fg-muted);content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");mask:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIGZpbGw9IiM1ODYwNjkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNTEuMjUxIDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyN3oiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-small,3px);cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--color-fg-on-emphasis);clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTExLjc4LjIyYS43NS43NSAwIDAgMSAwIDEuMDYxTDQuNTIgOC41NDFhLjc1Mi43NTIgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1MS43NTEgMCAwIDEgMS4wNjIgMFoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label,input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--color-accent-fg);border-color:var(--color-accent-fg);transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--color-primer-fg-disabled);border-color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--color-fg-on-emphasis)}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMWExIDEgMCAwIDEgMS0xaDhhMSAxIDAgMSAxIDAgMkgxYTEgMSAwIDAgMS0xLTFaIiBmaWxsPSIjZmZmIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);color:var(--color-fg-default)}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--color-primer-fg-disabled);background-color:var(--color-input-disabled-bg);border-color:var(--color-border-default);color:var(--color-primer-fg-disabled);cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--color-danger-emphasis)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px #0000 var(--color-accent-fg);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--color-accent-fg);box-shadow:inset 0 0 0 1px var(--color-accent-fg);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--color-neutral-emphasis);border-radius:var(--borderRadius-full,100vh);cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio]:checked{border-color:var(--color-accent-fg);border-width:var(--base-size-4,.25rem)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--color-primer-fg-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--color-accent-fg);outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
data/app/components/primer/alpha/text_field.css.json CHANGED
@@ -7,6 +7,7 @@
7
7
  ".FormControl-caption",
8
8
  ".FormControl-inlineValidation",
9
9
  ".FormControl-inlineValidation p",
10
+ ".FormControl-inlineValidation--visual",
10
11
  ".FormControl-spacingWrapper",
11
12
  ".FormControl-horizontalGroup",
12
13
  ".FormControl-input",
data/app/components/primer/alpha/text_field.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n line-height: var(--text-body-lineHeight-medium, calc(20 / 14));\n color: var(--color-fg-default);\n user-select: none;\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size, 12px);\n font-weight: var(--text-caption-weight, 400);\n line-height: var(--text-caption-lineHeight, calc(16 / 12));\n color: var(--color-fg-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size, 12px);\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-danger-fg);\n fill: var(--color-danger-fg);\n flex-direction: row;\n align-items: center;\n gap: var(--base-size-4, 4px);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--color-fg-default);\n background-color: var(--color-canvas-default);\n border: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n\n &[disabled] {\n color: var(--color-primer-fg-disabled);\n cursor: not-allowed;\n background-color: var(--color-input-disabled-bg);\n border-color: var(--color-border-default);\n opacity: 1;\n -webkit-text-fill-color: var(--color-primer-fg-disabled);\n }\n\n &:not(:focus)[invalid] {\n border-color: var(--color-danger-emphasis);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium, 14px);\n line-height: var(--text-body-lineHeight-medium, calc(20 / 14));\n border-radius: var(--borderRadius-medium, 6px);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed, 8px);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--color-primer-fg-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--color-input-disabled-bg);\n }\n\n &::placeholder {\n color: var(--color-fg-subtle);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size, 28px);\n padding-inline: var(--control-small-paddingInline-normal, 8px);\n padding-block: var(--control-small-paddingBlock, 4px);\n font-size: var(--text-body-size-small, 12px);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size, 32px);\n }\n\n &.FormControl-large {\n height: var(--control-large-size, 40px);\n padding-inline: var(--control-large-paddingInline-normal, 12px);\n padding-block: var(--control-large-paddingBlock, 10px);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--color-canvas-inset);\n\n &:focus-visible,\n &:focus {\n background-color: var(--color-canvas-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(\n --fontStack-monospace,\n 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'\n );\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--color-danger-emphasis);\n }\n\n &.FormControl-success {\n border-color: var(--color-success-emphasis);\n }\n\n &.FormControl-warning {\n border-color: var(--color-attention-emphasis);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16, 16px);\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8, 8px);\n left: var(--base-size-8, 8px);\n display: block;\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n color: var(--color-fg-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4, 4px);\n right: var(--base-size-4, 4px);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size, 24px);\n height: var(--control-xsmall-size, 24px);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--color-primer-fg-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--color-action-list-item-default-hover-bg);\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4, 4px) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--color-border-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse, 44px);\n min-height: var(--control-minTarget-coarse, 44px);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +\n var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +\n var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));\n height: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal, 12px);\n left: var(--control-medium-paddingInline-normal, 12px);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) +\n var(--borderWidth-thin, 1px)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */\n width: var(--control-small-size, 28px);\n height: var(--control-small-size, 28px);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n padding-right: var(--base-size-4, 4px);\n pointer-events: none;\n content: '';\n background-color: var(--color-fg-muted);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20, 20px);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8, 8px);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4, 4px);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--color-neutral-emphasis);\n border-radius: var(--borderRadius-small, 3px);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n visibility: hidden;\n content: '';\n background-color: var(--color-fg-on-emphasis);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16, 16px) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap,\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--color-primer-fg-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--color-accent-fg);\n border-color: var(--color-accent-fg);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--color-primer-fg-disabled);\n border-color: var(--color-primer-fg-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--color-fg-on-emphasis);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--color-neutral-emphasis);\n border-radius: var(--borderRadius-full, 100vh);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);\n }\n\n &:checked {\n border-color: var(--color-accent-fg);\n border-width: var(--base-size-4, 4px);\n\n &:disabled {\n cursor: not-allowed;\n border-color: var(--color-primer-fg-disabled);\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16, 16px) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16, 16px) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n border-color: var(--color-accent-fg);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--color-fg-default);\n user-select: none;\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--color-fg-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--color-danger-fg);\n fill: var(--color-danger-fg);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--color-fg-default);\n background-color: var(--color-canvas-default);\n border: var(--borderWidth-thin) solid var(--color-border-default);\n\n &[disabled] {\n color: var(--color-primer-fg-disabled);\n cursor: not-allowed;\n background-color: var(--color-input-disabled-bg);\n border-color: var(--color-border-default);\n opacity: 1;\n -webkit-text-fill-color: var(--color-primer-fg-disabled);\n }\n\n &:not(:focus)[invalid] {\n border-color: var(--color-danger-emphasis);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--color-primer-fg-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--color-input-disabled-bg);\n }\n\n &::placeholder {\n color: var(--color-fg-subtle);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--color-canvas-inset);\n\n &:focus-visible,\n &:focus {\n background-color: var(--color-canvas-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--color-danger-emphasis);\n }\n\n &.FormControl-success {\n border-color: var(--color-success-emphasis);\n }\n\n &.FormControl-warning {\n border-color: var(--color-attention-emphasis);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--color-fg-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--color-fg-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--color-primer-fg-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--color-action-list-item-default-hover-bg);\n }\n\n &:active {\n background: var(--color-action-list-item-default-active-bg);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--color-border-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--color-fg-muted);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--color-neutral-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--color-fg-on-emphasis);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap,\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--color-primer-fg-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--color-accent-fg);\n border-color: var(--color-accent-fg);\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--color-primer-fg-disabled);\n border-color: var(--color-primer-fg-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--color-fg-on-emphasis);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--color-neutral-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &:checked {\n border-color: var(--color-accent-fg);\n border-width: var(--base-size-4);\n\n &:disabled {\n cursor: not-allowed;\n border-color: var(--color-primer-fg-disabled);\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--color-accent-fg) {\n border-color: var(--color-accent-fg);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}