primer_view_components 0.3.1 → 0.5.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (214) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +31 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +16 -0
  4. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +30 -0
  5. data/app/assets/javascripts/app/components/primer/alpha/dropdown/menu.d.ts +1 -0
  6. data/app/assets/javascripts/app/components/primer/alpha/dropdown.d.ts +1 -0
  7. data/app/assets/javascripts/app/components/primer/alpha/image_crop.d.ts +1 -0
  8. data/app/assets/javascripts/app/components/primer/alpha/modal_dialog.d.ts +18 -0
  9. data/app/assets/javascripts/app/components/primer/alpha/nav_list.d.ts +28 -0
  10. data/app/assets/javascripts/app/components/primer/alpha/segmented_control.d.ts +12 -0
  11. data/app/assets/javascripts/app/components/primer/alpha/tab_container.d.ts +1 -0
  12. data/app/assets/javascripts/app/components/primer/alpha/toggle_switch.d.ts +30 -0
  13. data/app/assets/javascripts/app/components/primer/alpha/tool_tip.d.ts +26 -0
  14. data/app/assets/javascripts/app/components/primer/alpha/x_banner.d.ts +11 -0
  15. data/app/assets/javascripts/app/components/primer/anchored_position.d.ts +27 -0
  16. data/app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts +1 -0
  17. data/app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts +1 -0
  18. data/app/assets/javascripts/app/components/primer/beta/relative_time.d.ts +1 -0
  19. data/app/assets/javascripts/app/components/primer/focus_group.d.ts +19 -0
  20. data/app/assets/javascripts/app/components/primer/primer.d.ts +21 -0
  21. data/app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts +10 -0
  22. data/app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts +1 -0
  23. data/app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  24. data/app/assets/javascripts/primer_view_components.js +1 -1
  25. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  26. data/app/assets/styles/primer_view_components.css +1 -1
  27. data/app/assets/styles/primer_view_components.css.map +1 -1
  28. data/app/components/primer/alpha/action_bar/divider.rb +30 -0
  29. data/app/components/primer/alpha/action_bar/item.rb +26 -0
  30. data/app/components/primer/alpha/action_bar.css +1 -0
  31. data/app/components/primer/alpha/action_bar.css.json +17 -0
  32. data/app/components/primer/alpha/action_bar.css.map +1 -0
  33. data/app/components/primer/alpha/action_bar.html.erb +12 -0
  34. data/app/components/primer/alpha/action_bar.pcss +69 -0
  35. data/app/components/primer/alpha/action_bar.rb +110 -0
  36. data/app/components/primer/alpha/action_bar_element.d.ts +16 -0
  37. data/app/components/primer/alpha/action_bar_element.js +172 -0
  38. data/app/components/primer/alpha/action_bar_element.ts +175 -0
  39. data/app/components/primer/alpha/action_list.css +1 -1
  40. data/app/components/primer/alpha/action_list.css.map +1 -1
  41. data/app/components/primer/alpha/action_list.pcss +42 -42
  42. data/app/components/primer/alpha/action_list.rb +1 -0
  43. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -2
  44. data/app/components/primer/alpha/auto_complete.css +1 -1
  45. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  46. data/app/components/primer/alpha/auto_complete.pcss +10 -10
  47. data/app/components/primer/alpha/banner.css +1 -1
  48. data/app/components/primer/alpha/banner.css.map +1 -1
  49. data/app/components/primer/alpha/banner.pcss +16 -16
  50. data/app/components/primer/alpha/button_marketing.css +1 -1
  51. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  52. data/app/components/primer/alpha/button_marketing.pcss +9 -9
  53. data/app/components/primer/alpha/dialog.css +1 -1
  54. data/app/components/primer/alpha/dialog.css.map +1 -1
  55. data/app/components/primer/alpha/dialog.pcss +9 -9
  56. data/app/components/primer/alpha/dropdown.css +1 -1
  57. data/app/components/primer/alpha/dropdown.css.map +1 -1
  58. data/app/components/primer/alpha/dropdown.pcss +16 -16
  59. data/app/components/primer/alpha/layout.css +1 -1
  60. data/app/components/primer/alpha/layout.css.map +1 -1
  61. data/app/components/primer/alpha/layout.pcss +3 -3
  62. data/app/components/primer/alpha/menu.css +1 -1
  63. data/app/components/primer/alpha/menu.css.map +1 -1
  64. data/app/components/primer/alpha/menu.pcss +13 -13
  65. data/app/components/primer/alpha/nav_list.rb +1 -0
  66. data/app/components/primer/alpha/segmented_control.css +1 -1
  67. data/app/components/primer/alpha/segmented_control.css.json +2 -0
  68. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  69. data/app/components/primer/alpha/segmented_control.pcss +16 -6
  70. data/app/components/primer/alpha/tab_nav.css +1 -1
  71. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  72. data/app/components/primer/alpha/tab_nav.pcss +10 -10
  73. data/app/components/primer/alpha/text_field.css +1 -1
  74. data/app/components/primer/alpha/text_field.css.map +1 -1
  75. data/app/components/primer/alpha/text_field.pcss +38 -38
  76. data/app/components/primer/alpha/toggle_switch.css +1 -1
  77. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  78. data/app/components/primer/alpha/toggle_switch.pcss +23 -23
  79. data/app/components/primer/alpha/tool_tip.d.ts +3 -2
  80. data/app/components/primer/alpha/tool_tip.js +89 -44
  81. data/app/components/primer/alpha/tool_tip.ts +88 -41
  82. data/app/components/primer/alpha/tooltip.rb +1 -0
  83. data/app/components/primer/alpha/underline_nav.css +1 -1
  84. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  85. data/app/components/primer/alpha/underline_nav.pcss +15 -15
  86. data/app/components/primer/beta/avatar.css +1 -1
  87. data/app/components/primer/beta/avatar.css.map +1 -1
  88. data/app/components/primer/beta/avatar.pcss +2 -2
  89. data/app/components/primer/beta/avatar_stack.css +1 -1
  90. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  91. data/app/components/primer/beta/avatar_stack.pcss +10 -10
  92. data/app/components/primer/beta/blankslate.css +1 -1
  93. data/app/components/primer/beta/blankslate.css.map +1 -1
  94. data/app/components/primer/beta/blankslate.pcss +4 -4
  95. data/app/components/primer/beta/border_box.css +1 -1
  96. data/app/components/primer/beta/border_box.css.map +1 -1
  97. data/app/components/primer/beta/border_box.pcss +31 -31
  98. data/app/components/primer/beta/breadcrumbs.css +1 -1
  99. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  100. data/app/components/primer/beta/breadcrumbs.pcss +2 -2
  101. data/app/components/primer/beta/button.css +1 -1
  102. data/app/components/primer/beta/button.css.map +1 -1
  103. data/app/components/primer/beta/button.pcss +70 -70
  104. data/app/components/primer/beta/counter.css +1 -1
  105. data/app/components/primer/beta/counter.css.map +1 -1
  106. data/app/components/primer/beta/counter.pcss +7 -7
  107. data/app/components/primer/beta/flash.css +1 -1
  108. data/app/components/primer/beta/flash.css.map +1 -1
  109. data/app/components/primer/beta/flash.pcss +19 -19
  110. data/app/components/primer/beta/label.css +1 -1
  111. data/app/components/primer/beta/label.css.map +1 -1
  112. data/app/components/primer/beta/label.pcss +23 -23
  113. data/app/components/primer/beta/link.css +1 -1
  114. data/app/components/primer/beta/link.css.map +1 -1
  115. data/app/components/primer/beta/link.pcss +12 -8
  116. data/app/components/primer/beta/link.rb +6 -10
  117. data/app/components/primer/beta/popover.css +1 -1
  118. data/app/components/primer/beta/popover.css.map +1 -1
  119. data/app/components/primer/beta/popover.pcss +10 -10
  120. data/app/components/primer/beta/progress_bar.css +1 -1
  121. data/app/components/primer/beta/progress_bar.css.map +1 -1
  122. data/app/components/primer/beta/progress_bar.pcss +1 -1
  123. data/app/components/primer/beta/state.css +1 -1
  124. data/app/components/primer/beta/state.css.map +1 -1
  125. data/app/components/primer/beta/state.pcss +8 -8
  126. data/app/components/primer/beta/subhead.css +1 -1
  127. data/app/components/primer/beta/subhead.css.map +1 -1
  128. data/app/components/primer/beta/subhead.pcss +3 -3
  129. data/app/components/primer/beta/timeline_item.css +1 -1
  130. data/app/components/primer/beta/timeline_item.css.map +1 -1
  131. data/app/components/primer/beta/timeline_item.pcss +13 -13
  132. data/app/components/primer/primer.d.ts +1 -0
  133. data/app/components/primer/primer.js +1 -0
  134. data/app/components/primer/primer.pcss +1 -0
  135. data/app/components/primer/primer.ts +1 -0
  136. data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
  137. data/lib/postcss_mixins/focusBoxShadowInset.pcss +2 -2
  138. data/lib/postcss_mixins/focusOutline.pcss +1 -1
  139. data/lib/postcss_mixins/focusOutlineOnEmphasis.pcss +2 -2
  140. data/lib/postcss_mixins/targetBoxShadow.pcss +2 -1
  141. data/lib/primer/static/generate_previews.rb +9 -0
  142. data/lib/primer/view_components/linters/accessibility.yml +2 -0
  143. data/lib/primer/view_components/linters/argument_mappers/label.rb +4 -4
  144. data/lib/primer/view_components/linters/details_menu_migration.rb +35 -0
  145. data/lib/primer/view_components/linters/label_component_migration_counter.rb +1 -1
  146. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -3
  147. data/lib/primer/view_components/version.rb +2 -2
  148. data/lib/primer/yard.rb +5 -0
  149. data/previews/primer/alpha/action_bar_preview/inline.html.erb +16 -0
  150. data/previews/primer/alpha/action_bar_preview.rb +77 -0
  151. data/previews/primer/alpha/action_list_preview.rb +10 -0
  152. data/previews/primer/alpha/action_menu_preview.rb +5 -0
  153. data/previews/primer/alpha/auto_complete_preview.rb +1 -0
  154. data/previews/primer/alpha/banner_preview.rb +9 -1
  155. data/previews/primer/alpha/button_marketing_preview.rb +2 -0
  156. data/previews/primer/alpha/check_box_group_preview.rb +1 -0
  157. data/previews/primer/alpha/check_box_preview.rb +6 -0
  158. data/previews/primer/alpha/dialog_preview.rb +1 -0
  159. data/previews/primer/alpha/dropdown_preview.rb +1 -0
  160. data/previews/primer/alpha/hellip_button_preview.rb +1 -0
  161. data/previews/primer/alpha/hidden_text_expander_preview.rb +1 -0
  162. data/previews/primer/alpha/layout_preview.rb +4 -0
  163. data/previews/primer/alpha/menu_preview.rb +1 -0
  164. data/previews/primer/alpha/multi_input_preview.rb +4 -0
  165. data/previews/primer/alpha/nav_list_preview.rb +3 -0
  166. data/previews/primer/alpha/radio_button_group_preview.rb +2 -0
  167. data/previews/primer/alpha/radio_button_preview.rb +10 -0
  168. data/previews/primer/alpha/segmented_control_preview.rb +13 -0
  169. data/previews/primer/alpha/select_preview.rb +6 -0
  170. data/previews/primer/alpha/tab_nav_preview.rb +3 -0
  171. data/previews/primer/alpha/tab_panels_preview.rb +1 -0
  172. data/previews/primer/alpha/text_area_preview.rb +7 -0
  173. data/previews/primer/alpha/text_field_preview.rb +15 -0
  174. data/previews/primer/alpha/toggle_switch_preview.rb +18 -11
  175. data/previews/primer/alpha/tooltip_preview/tooltip_inside_primer_overlay.html.erb +20 -0
  176. data/previews/primer/alpha/tooltip_preview.rb +7 -0
  177. data/previews/primer/alpha/underline_nav_preview.rb +2 -0
  178. data/previews/primer/beta/auto_complete_item_preview.rb +2 -0
  179. data/previews/primer/beta/auto_complete_preview.rb +7 -0
  180. data/previews/primer/beta/avatar_preview.rb +10 -0
  181. data/previews/primer/beta/avatar_stack_preview.rb +3 -0
  182. data/previews/primer/beta/blankslate_preview.rb +9 -0
  183. data/previews/primer/beta/border_box_preview.rb +4 -0
  184. data/previews/primer/beta/breadcrumbs_preview.rb +1 -0
  185. data/previews/primer/beta/button_group_preview.rb +4 -0
  186. data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -0
  187. data/previews/primer/beta/button_preview.rb +17 -2
  188. data/previews/primer/beta/clipboard_copy_preview.rb +2 -0
  189. data/previews/primer/beta/close_button_preview.rb +1 -0
  190. data/previews/primer/beta/counter_preview.rb +11 -0
  191. data/previews/primer/beta/flash_preview.rb +8 -0
  192. data/previews/primer/beta/heading_preview.rb +1 -0
  193. data/previews/primer/beta/icon_button_preview.rb +3 -0
  194. data/previews/primer/beta/label_preview.rb +13 -0
  195. data/previews/primer/beta/link_preview.rb +11 -9
  196. data/previews/primer/beta/markdown_preview.rb +1 -0
  197. data/previews/primer/beta/octicon_preview.rb +1 -0
  198. data/previews/primer/beta/popover_preview.rb +6 -0
  199. data/previews/primer/beta/progress_bar_preview.rb +4 -0
  200. data/previews/primer/beta/spinner_preview.rb +1 -0
  201. data/previews/primer/beta/state_preview.rb +6 -0
  202. data/previews/primer/beta/subhead_preview.rb +4 -0
  203. data/previews/primer/beta/text_preview.rb +1 -0
  204. data/previews/primer/beta/timeline_item_preview.rb +1 -0
  205. data/previews/primer/beta/truncate_preview.rb +1 -0
  206. data/previews/primer/box_preview.rb +2 -0
  207. data/static/arguments.json +55 -11
  208. data/static/audited_at.json +7 -4
  209. data/static/classes.json +21 -0
  210. data/static/constants.json +20 -6
  211. data/static/info_arch.json +673 -11
  212. data/static/previews.json +571 -0
  213. data/static/statuses.json +3 -0
  214. metadata +44 -8
@@ -1 +1 @@
1
- {"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,oCAAqC,CACrC,wCAAyC,CACzC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,sCAAuC,CAJvC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n grid-auto-flow: row;\n grid-template-columns: 1fr !important;\n\n & .Layout-sidebar,\n & .Layout-divider,\n & .Layout-main {\n width: 100% !important;\n grid-column: 1 !important;\n }\n\n &.Layout--sidebarPosition-flowRow-start {\n & .Layout-sidebar {\n grid-row: 1;\n }\n\n & .Layout-main {\n grid-row: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 2 / span 2;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-none {\n & .Layout-sidebar {\n display: none;\n }\n }\n\n &.Layout--divided {\n @mixin flow-as-row-divider;\n\n & .Layout-main {\n grid-row: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 3 / span 1;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n }\n}\n\n@define-mixin flow-as-row-divider {\n --Layout-gutter: 0;\n\n & .Layout-divider {\n height: 1px;\n grid-row: 2;\n\n &.Layout-divider--flowRow-hidden {\n display: none;\n }\n\n &.Layout-divider--flowRow-shallow {\n height: 8px;\n margin-right: 0;\n background: var(--color-canvas-inset);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin) 0;\n }\n }\n}\n\n.Layout {\n display: grid;\n\n --Layout-sidebar-width: 220px;\n --Layout-gutter: 16px;\n\n @media (max-width: calc(544px - 0.02px)) {\n @mixin flow-as-row;\n }\n\n &.Layout--flowRow-until-md {\n @media (max-width: calc(768px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n &.Layout--flowRow-until-lg {\n @media (max-width: calc(1012px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n /* Flow as column */\n\n grid-auto-flow: column;\n grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n grid-gap: var(--Layout-gutter);\n\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-divider {\n display: none;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n\n /* Gutter spacing */\n\n @media (min-width: 1012px) {\n --Layout-gutter: 24px;\n }\n\n &.Layout--gutter-none {\n /* stylelint-disable-next-line length-zero-no-unit */\n --Layout-gutter: 0px; /* Neds px in value */\n }\n\n &.Layout--gutter-condensed {\n --Layout-gutter: 16px;\n }\n\n &.Layout--gutter-spacious {\n @media (min-width: 1012px) {\n --Layout-gutter: 32px;\n }\n\n @media (min-width: 1280px) {\n --Layout-gutter: 40px;\n }\n }\n\n /* Sidebar width */\n @media (min-width: 544px) {\n --Layout-sidebar-width: 220px;\n }\n\n @media (min-width: 768px) {\n --Layout-sidebar-width: 256px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 296px;\n }\n\n &.Layout--sidebar-narrow {\n @media (min-width: 768px) {\n --Layout-sidebar-width: 240px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 256px;\n }\n }\n\n &.Layout--sidebar-wide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 320px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 336px;\n }\n }\n\n /* Sidebar position */\n\n &.Layout--sidebarPosition-start {\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-end {\n grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n & .Layout-main {\n grid-column: 1;\n }\n\n & .Layout-sidebar {\n grid-column: 2 / span 2;\n }\n }\n\n /* Sidebar divider */\n\n &.Layout--divided {\n & .Layout-divider {\n display: block;\n grid-column: 2;\n width: 1px;\n margin-right: -1px;\n background: var(--color-border-default);\n }\n\n & .Layout-main {\n grid-column: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-end {\n & .Layout-sidebar {\n grid-column: 3 / span 1;\n }\n\n & .Layout-main {\n grid-column: 1;\n }\n }\n }\n}\n\n.Layout-divider {\n display: none;\n width: 1px;\n}\n\n.Layout-sidebar {\n width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n min-width: 0;\n\n /* Centered main column\n ** FIXME: right-aligned sidebar */\n & .Layout-main-centered-md,\n & .Layout-main-centered-lg,\n & .Layout-main-centered-xl {\n margin-right: auto;\n margin-left: auto;\n\n & > .container-md,\n & > .container-lg,\n & > .container-xl {\n margin-left: 0;\n }\n }\n\n & .Layout-main-centered-md {\n max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
1
+ {"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,0DAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,iEAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n grid-auto-flow: row;\n grid-template-columns: 1fr !important;\n\n & .Layout-sidebar,\n & .Layout-divider,\n & .Layout-main {\n width: 100% !important;\n grid-column: 1 !important;\n }\n\n &.Layout--sidebarPosition-flowRow-start {\n & .Layout-sidebar {\n grid-row: 1;\n }\n\n & .Layout-main {\n grid-row: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 2 / span 2;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-none {\n & .Layout-sidebar {\n display: none;\n }\n }\n\n &.Layout--divided {\n @mixin flow-as-row-divider;\n\n & .Layout-main {\n grid-row: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 3 / span 1;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n }\n}\n\n@define-mixin flow-as-row-divider {\n --Layout-gutter: 0;\n\n & .Layout-divider {\n height: 1px;\n grid-row: 2;\n\n &.Layout-divider--flowRow-hidden {\n display: none;\n }\n\n &.Layout-divider--flowRow-shallow {\n height: 8px;\n margin-right: 0;\n background: var(--bgColor-muted);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin) 0;\n }\n }\n}\n\n.Layout {\n display: grid;\n\n --Layout-sidebar-width: 220px;\n --Layout-gutter: 16px;\n\n @media (max-width: calc(544px - 0.02px)) {\n @mixin flow-as-row;\n }\n\n &.Layout--flowRow-until-md {\n @media (max-width: calc(768px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n &.Layout--flowRow-until-lg {\n @media (max-width: calc(1012px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n /* Flow as column */\n\n grid-auto-flow: column;\n grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n grid-gap: var(--Layout-gutter);\n\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-divider {\n display: none;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n\n /* Gutter spacing */\n\n @media (min-width: 1012px) {\n --Layout-gutter: 24px;\n }\n\n &.Layout--gutter-none {\n /* stylelint-disable-next-line length-zero-no-unit */\n --Layout-gutter: 0px; /* Neds px in value */\n }\n\n &.Layout--gutter-condensed {\n --Layout-gutter: 16px;\n }\n\n &.Layout--gutter-spacious {\n @media (min-width: 1012px) {\n --Layout-gutter: 32px;\n }\n\n @media (min-width: 1280px) {\n --Layout-gutter: 40px;\n }\n }\n\n /* Sidebar width */\n @media (min-width: 544px) {\n --Layout-sidebar-width: 220px;\n }\n\n @media (min-width: 768px) {\n --Layout-sidebar-width: 256px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 296px;\n }\n\n &.Layout--sidebar-narrow {\n @media (min-width: 768px) {\n --Layout-sidebar-width: 240px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 256px;\n }\n }\n\n &.Layout--sidebar-wide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 320px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 336px;\n }\n }\n\n /* Sidebar position */\n\n &.Layout--sidebarPosition-start {\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-end {\n grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n & .Layout-main {\n grid-column: 1;\n }\n\n & .Layout-sidebar {\n grid-column: 2 / span 2;\n }\n }\n\n /* Sidebar divider */\n\n &.Layout--divided {\n & .Layout-divider {\n display: block;\n grid-column: 2;\n width: 1px;\n margin-right: -1px;\n background: var(--borderColor-default);\n }\n\n & .Layout-main {\n grid-column: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-end {\n & .Layout-sidebar {\n grid-column: 3 / span 1;\n }\n\n & .Layout-main {\n grid-column: 1;\n }\n }\n }\n}\n\n.Layout-divider {\n display: none;\n width: 1px;\n}\n\n.Layout-sidebar {\n width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n min-width: 0;\n\n /* Centered main column\n ** FIXME: right-aligned sidebar */\n & .Layout-main-centered-md,\n & .Layout-main-centered-lg,\n & .Layout-main-centered-xl {\n margin-right: auto;\n margin-left: auto;\n\n & > .container-md,\n & > .container-lg,\n & > .container-xl {\n margin-left: 0;\n }\n }\n\n & .Layout-main-centered-md {\n max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
@@ -70,8 +70,8 @@
70
70
  &.Layout-divider--flowRow-shallow {
71
71
  height: 8px;
72
72
  margin-right: 0;
73
- background: var(--color-canvas-inset);
74
- border-color: var(--color-border-default);
73
+ background: var(--bgColor-muted);
74
+ border-color: var(--borderColor-default);
75
75
  border-style: solid;
76
76
  border-width: var(--borderWidth-thin) 0;
77
77
  }
@@ -208,7 +208,7 @@
208
208
  grid-column: 2;
209
209
  width: 1px;
210
210
  margin-right: -1px;
211
- background: var(--color-border-default);
211
+ background: var(--borderColor-default);
212
212
  }
213
213
 
214
214
  & .Layout-main {
@@ -1 +1 @@
1
- .menu{background-color:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);border-radius:var(--borderRadius-medium,6px);list-style:none;margin-bottom:var(--stack-gap-normal,1rem)}.menu-item{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);color:var(--color-fg-default);display:block;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,6px)}.menu-item:hover{background-color:var(--color-neutral-subtle);text-decoration:none}.menu-item:active{background-color:var(--color-canvas-subtle)}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--color-menu-bg-active);cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--color-primer-border-active);bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--color-fg-muted);margin-right:var(--control-medium-gap,.5rem);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,.25rem)}.menu-item .menu-warning{color:var(--color-attention-fg);float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,.25rem)}.menu-item.alert .Counter{color:var(--color-danger-fg)}.menu-heading{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);color:var(--color-fg-default);display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}
1
+ .menu{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);list-style:none;margin-bottom:var(--stack-gap-normal,1rem)}.menu-item{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,6px)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,6px)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,6px)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,6px)}.menu-item:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active,var(--color-menu-bg-active));cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-medium-gap,.5rem);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,.25rem)}.menu-item .menu-warning{color:var(--fgColor-attention,var(--color-attention-fg));float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,.25rem)}.menu-item.alert .Counter{color:var(--fgColor-danger,var(--color-danger-fg))}.menu-heading{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}
@@ -1 +1 @@
1
- {"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,4CAA6C,CAC7C,kFAAiE,CACjE,4CAAyC,CAHzC,eAAgB,CADhB,0CAKF,CAEA,WAKE,uFAAsE,CADtE,6BAA8B,CAF9B,aAAc,CACd,6GAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,4CAA6C,CAD7C,oBAEF,CAEA,kBACE,2CACF,CAEA,sGAIE,4CAA6C,CAD7C,cAYF,CATE,2HAOE,kDAAmD,CAJnD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,2BAA4B,CAD5B,4CAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,2CACF,CAEA,yBAEE,+BAAgC,CADhC,WAEF,CAEA,mBACE,UAAW,CACX,4CACF,CAGE,0BACE,4BACF,CAIJ,cAQE,uFAAsE,CADtE,6BAA8B,CAN9B,aAAc,CAId,iBAAkB,CAClB,gDAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,6GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAkD,CAClD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAAqD,CADrD,yDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--stack-gap-normal);\n list-style: none;\n background-color: var(--color-canvas-default);\n border: var(--borderWidth-thin) solid var(--color-border-default);\n border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n color: var(--color-fg-default);\n border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n\n &::before {\n border-top-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n\n &::before {\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--color-neutral-subtle);\n }\n\n &:active {\n background-color: var(--color-canvas-subtle);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--color-menu-bg-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--color-primer-border-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--control-medium-gap);\n color: var(--color-fg-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--control-small-gap);\n }\n\n & .menu-warning {\n float: right;\n color: var(--color-attention-fg);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--control-small-gap);\n }\n\n &.alert {\n & .Counter {\n color: var(--color-danger-fg);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n color: var(--color-fg-default);\n border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n"]}
1
+ {"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,mEAAwC,CACxC,6GAAgE,CAChE,4CAAyC,CAHzC,eAAgB,CADhB,0CAKF,CAEA,WAKE,oHAAuE,CADvE,oDAA6B,CAF7B,aAAc,CACd,6GAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,sDAKF,CAHE,qDAHA,qDAKA,CAGF,sBACE,eAAgB,CAChB,yDAMF,CAHE,mDAFA,wDAIA,CAGF,iBAEE,yEAA8C,CAD9C,oBAEF,CAEA,kBACE,gEACF,CAEA,sGAIE,uEAA4C,CAD5C,cAYF,CATE,2HAOE,yFAAwD,CAJxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,gDAA2B,CAD3B,4CAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,2CACF,CAEA,yBAEE,wDAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CACX,4CACF,CAGE,0BACE,kDACF,CAIJ,cAQE,oHAAuE,CADvE,oDAA6B,CAN7B,aAAc,CAId,iBAAkB,CAClB,gDAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,6GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,qDAAkD,CAClD,sDACF,CAEA,yBACE,eAAgB,CAEhB,wDAAqD,CADrD,yDAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--stack-gap-normal);\n list-style: none;\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n\n &::before {\n border-top-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n\n &::before {\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n }\n\n &:active {\n background-color: var(--bgColor-muted);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--menu-bgColor-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--underlineNav-borderColor-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--control-medium-gap);\n color: var(--fgColor-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--control-small-gap);\n }\n\n & .menu-warning {\n float: right;\n color: var(--fgColor-attention);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--control-small-gap);\n }\n\n &.alert {\n & .Counter {\n color: var(--fgColor-danger);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n"]}
@@ -5,8 +5,8 @@
5
5
  .menu {
6
6
  margin-bottom: var(--stack-gap-normal);
7
7
  list-style: none;
8
- background-color: var(--color-canvas-default);
9
- border: var(--borderWidth-thin) solid var(--color-border-default);
8
+ background-color: var(--bgColor-default);
9
+ border: var(--borderWidth-thin) solid var(--borderColor-default);
10
10
  border-radius: var(--borderRadius-medium);
11
11
  }
12
12
 
@@ -14,8 +14,8 @@
14
14
  position: relative;
15
15
  display: block;
16
16
  padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
17
- color: var(--color-fg-default);
18
- border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
17
+ color: var(--fgColor-default);
18
+ border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
19
19
 
20
20
  &:first-child {
21
21
  border-top: 0;
@@ -39,18 +39,18 @@
39
39
 
40
40
  &:hover {
41
41
  text-decoration: none;
42
- background-color: var(--color-neutral-subtle);
42
+ background-color: var(--bgColor-neutral-muted);
43
43
  }
44
44
 
45
45
  &:active {
46
- background-color: var(--color-canvas-subtle);
46
+ background-color: var(--bgColor-muted);
47
47
  }
48
48
 
49
49
  &.selected,
50
50
  &[aria-selected='true'],
51
51
  &[aria-current]:not([aria-current='false']) {
52
52
  cursor: default;
53
- background-color: var(--color-menu-bg-active);
53
+ background-color: var(--menu-bgColor-active);
54
54
 
55
55
  &::before {
56
56
  position: absolute;
@@ -59,14 +59,14 @@
59
59
  left: 0;
60
60
  width: 2px;
61
61
  content: '';
62
- background-color: var(--color-primer-border-active);
62
+ background-color: var(--underlineNav-borderColor-active);
63
63
  }
64
64
  }
65
65
 
66
66
  & .octicon {
67
67
  width: 16px;
68
68
  margin-right: var(--control-medium-gap);
69
- color: var(--color-fg-muted);
69
+ color: var(--fgColor-muted);
70
70
  text-align: center;
71
71
  }
72
72
 
@@ -77,7 +77,7 @@
77
77
 
78
78
  & .menu-warning {
79
79
  float: right;
80
- color: var(--color-attention-fg);
80
+ color: var(--fgColor-attention);
81
81
  }
82
82
 
83
83
  & .avatar {
@@ -87,7 +87,7 @@
87
87
 
88
88
  &.alert {
89
89
  & .Counter {
90
- color: var(--color-danger-fg);
90
+ color: var(--fgColor-danger);
91
91
  }
92
92
  }
93
93
  }
@@ -99,8 +99,8 @@
99
99
  margin-bottom: 0;
100
100
  font-size: inherit;
101
101
  font-weight: var(--base-text-weight-semibold);
102
- color: var(--color-fg-default);
103
- border-bottom: var(--borderWidth-thin) solid var(--color-border-muted);
102
+ color: var(--fgColor-default);
103
+ border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
104
104
 
105
105
  &:hover {
106
106
  text-decoration: none;
@@ -16,6 +16,7 @@ module Primer
16
16
  # `selected_item_id` argument to select the appropriate item.
17
17
  class NavList < Primer::Component
18
18
  status :alpha
19
+ audited_at "2023-07-10"
19
20
 
20
21
  # @private
21
22
  def self.custom_element_name
@@ -1 +1 @@
1
- .SegmentedControl{background-color:var(--color-segmented-control-bg);border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--color-segmented-control-button-bg);border-color:var(--color-segmented-control-button-selected-border)}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--color-btn-text);font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--color-btn-text)}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
1
+ .SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,6px);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,6px);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--button-default-fgColor-rest,var(--color-btn-text));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,6px) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
@@ -3,6 +3,8 @@
3
3
  "selectors": [
4
4
  ".SegmentedControl",
5
5
  ".SegmentedControl-item",
6
+ ".SegmentedControl-item .Button--invisible:hover:not(:disabled)",
7
+ ".SegmentedControl-item .Button--invisible:active:not(:disabled)",
6
8
  ".SegmentedControl-item.SegmentedControl-item--selected",
7
9
  ".SegmentedControl-item.SegmentedControl-item--selected .Button",
8
10
  ".SegmentedControl-item.SegmentedControl-item--selected .Button:hover",
@@ -1 +1 @@
1
- {"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,kDAAmD,CACnD,4CAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,4CAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAwHF,CAjHE,uDACE,yDAA0D,CAC1D,kEAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,uFAAsE,CADtE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,2BAA4B,CAF5B,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,wDAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DCpFR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UDoFoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DCrGR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UDqGoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DCtHR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDsHkF,CAKhF,yCACE,eACF,CAEA,oFACE,2BACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--color-segmented-control-bg);\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n padding: var(--control-xsmall-paddingInline-condensed);\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--color-segmented-control-button-bg);\n border-color: var(--color-segmented-control-button-selected-border);\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--color-border-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal);\n transition: none;\n color: var(--color-btn-text);\n\n &:focus-visible {\n outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(\n var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--medium {\n height: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--large {\n height: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--color-btn-text);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
1
+ {"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,4CAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,4CAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAkIF,CA3HI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,8DAAyC,CAFzC,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,wDAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DC9FR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD8FoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DC/GR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD+GoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DChIR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDgIkF,CAKhF,yCACE,eACF,CAEA,oFACE,8DACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n padding: var(--control-xsmall-paddingInline-condensed);\n\n & .Button--invisible {\n &:hover:not(:disabled) {\n background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &:active:not(:disabled) {\n background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n }\n }\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal);\n transition: none;\n color: var(--button-default-fgColor-rest);\n\n &:focus-visible {\n outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(\n var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--medium {\n height: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--large {\n height: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--button-default-fgColor-rest);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
@@ -3,7 +3,7 @@
3
3
  .SegmentedControl {
4
4
  display: inline-flex;
5
5
  list-style: none;
6
- background-color: var(--color-segmented-control-bg);
6
+ background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));
7
7
  border-radius: var(--borderRadius-medium);
8
8
  }
9
9
 
@@ -14,10 +14,20 @@
14
14
  border-radius: var(--borderRadius-medium);
15
15
  padding: var(--control-xsmall-paddingInline-condensed);
16
16
 
17
+ & .Button--invisible {
18
+ &:hover:not(:disabled) {
19
+ background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));
20
+ }
21
+
22
+ &:active:not(:disabled) {
23
+ background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));
24
+ }
25
+ }
26
+
17
27
  /* Selected ---------------------------------------- */
18
28
  &.SegmentedControl-item--selected {
19
- background-color: var(--color-segmented-control-button-bg);
20
- border-color: var(--color-segmented-control-button-selected-border);
29
+ background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));
30
+ border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));
21
31
 
22
32
  & .Button {
23
33
  font-weight: var(--base-text-weight-semibold);
@@ -53,7 +63,7 @@
53
63
  margin-top: var(--control-medium-paddingBlock);
54
64
  margin-bottom: var(--control-medium-paddingBlock);
55
65
  content: '';
56
- border-left: var(--borderWidth-thin) solid var(--color-border-default);
66
+ border-left: var(--borderWidth-thin) solid var(--borderColor-default);
57
67
  }
58
68
  }
59
69
 
@@ -62,7 +72,7 @@
62
72
  border: 0;
63
73
  font-weight: var(--base-text-weight-normal);
64
74
  transition: none;
65
- color: var(--color-btn-text);
75
+ color: var(--button-default-fgColor-rest);
66
76
 
67
77
  &:focus-visible {
68
78
  outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));
@@ -126,7 +136,7 @@
126
136
  }
127
137
 
128
138
  & .Button--invisible.Button--invisible-noVisuals .Button-label {
129
- color: var(--color-btn-text);
139
+ color: var(--button-default-fgColor-rest);
130
140
  }
131
141
  }
132
142
 
@@ -1 +1 @@
1
- .tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--color-fg-muted);display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--color-fg-default)}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--color-fg-default);text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--color-fg-muted)}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--color-fg-muted);display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--color-accent-fg);text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}
1
+ .tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,6px) var(--borderRadius-medium,6px) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,yFAAwE,CADxE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,2BAA4B,CAL5B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,4CAA6C,CAC7C,wCAAyC,CACzC,+EAAwE,CAHxE,6BAQF,CAHE,oIACE,aACF,CAGF,kBACE,6BAA8B,CAC9B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,yFAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,2BAMF,CAHA,qBACE,4CAEF,CAEA,qBAEE,aAAc,CADd,2CAEF,CAQF,cAKE,2BAA4B,CAJ5B,oBAAqB,CAGrB,4CAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,4BAA6B,CAC7B,oBACF,CAOA,YACE,0DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--color-border-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: auto;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n line-height: 23px;\n color: var(--color-fg-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--color-fg-default);\n background-color: var(--color-canvas-default); /* cover bottom border */\n border-color: var(--color-border-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--color-fg-muted);\n }\n\n & .octicon {\n margin-right: var(--control-small-gap);\n color: var(--color-fg-muted);\n }\n\n & .Counter {\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--color-fg-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
1
+ {"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,oHAAuE,CADvE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,gDAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,mEAAwC,CACxC,mEAAwC,CACxC,+EAAwE,CAHxE,oDAQF,CAHE,oIACE,aACF,CAGF,kBACE,oDAA6B,CAC7B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,yFAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,gDAMF,CAHA,qBACE,4CAEF,CAEA,qBAEE,aAAc,CADd,2CAEF,CAQF,cAKE,gDAA2B,CAJ3B,oBAAqB,CAGrB,4CAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,kDAA4B,CAC5B,oBACF,CAOA,YACE,0DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: auto;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n line-height: 23px;\n color: var(--fgColor-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default); /* cover bottom border */\n border-color: var(--borderColor-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--fgColor-muted);\n }\n\n & .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n & .Counter {\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
@@ -4,7 +4,7 @@
4
4
  .tabnav {
5
5
  margin-top: 0;
6
6
  margin-bottom: var(--stack-gap-normal);
7
- border-bottom: var(--borderWidth-thin) solid var(--color-border-default);
7
+ border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
8
8
  }
9
9
 
10
10
  .tabnav-tabs {
@@ -19,7 +19,7 @@
19
19
  padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
20
20
  font-size: var(--text-body-size-medium);
21
21
  line-height: 23px;
22
- color: var(--color-fg-muted);
22
+ color: var(--fgColor-muted);
23
23
  text-decoration: none;
24
24
  background-color: transparent;
25
25
  border: var(--borderWidth-thin) solid transparent;
@@ -29,9 +29,9 @@
29
29
  &.selected,
30
30
  &[aria-selected='true'],
31
31
  &[aria-current]:not([aria-current='false']) {
32
- color: var(--color-fg-default);
33
- background-color: var(--color-canvas-default); /* cover bottom border */
34
- border-color: var(--color-border-default);
32
+ color: var(--fgColor-default);
33
+ background-color: var(--bgColor-default); /* cover bottom border */
34
+ border-color: var(--borderColor-default);
35
35
  border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
36
36
 
37
37
  & .octicon {
@@ -40,7 +40,7 @@
40
40
  }
41
41
 
42
42
  &:hover {
43
- color: var(--color-fg-default);
43
+ color: var(--fgColor-default);
44
44
  text-decoration: none;
45
45
  transition-duration: 0.1s;
46
46
  }
@@ -52,12 +52,12 @@
52
52
  }
53
53
 
54
54
  &:active {
55
- color: var(--color-fg-muted);
55
+ color: var(--fgColor-muted);
56
56
  }
57
57
 
58
58
  & .octicon {
59
59
  margin-right: var(--control-small-gap);
60
- color: var(--color-fg-muted);
60
+ color: var(--fgColor-muted);
61
61
  }
62
62
 
63
63
  & .Counter {
@@ -76,7 +76,7 @@
76
76
  padding-top: 10px;
77
77
  margin-left: 10px;
78
78
  font-size: var(--text-body-size-small);
79
- color: var(--color-fg-muted);
79
+ color: var(--fgColor-muted);
80
80
 
81
81
  & > .octicon {
82
82
  margin-right: 2px;
@@ -86,7 +86,7 @@
86
86
  /* When tabnav-extra are anchors
87
87
  ** stylelint-disable-next-line selector-no-qualifying-type */
88
88
  a.tabnav-extra:hover {
89
- color: var(--color-accent-fg);
89
+ color: var(--fgColor-accent);
90
90
  text-decoration: none;
91
91
  }
92
92
 
@@ -1 +1 @@
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)}}
1
+ .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,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(--fgColor-muted,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(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;color:var(--control-borderColor-danger,var(--color-danger-emphasis));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(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,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(--control-borderColor-danger,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(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,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(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,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(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,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(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,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(--bgColor-muted,var(--color-canvas-subtle))}.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(--bgColor-default,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(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,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(--fgColor-muted,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(--fgColor-muted,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(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,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(--bgColor-neutral-emphasis,var(--color-fg-subtle));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(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-checkbox[type=checkbox][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,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(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));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(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));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(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,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(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@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(--focus-outlineColor,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(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default))}input.FormControl-radio[type=radio][disabled]{-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-radio[type=radio][invalid]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,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(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,9999px);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(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4,.25rem)}input.FormControl-radio[type=radio]:checked:disabled{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,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)}}