primer_view_components 0.6.0 → 0.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (153) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +62 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_bar.rb +0 -8
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.json +1 -0
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_list.pcss +6 -0
  12. data/app/components/primer/alpha/action_menu/action_menu_element.js +45 -7
  13. data/app/components/primer/alpha/action_menu/action_menu_element.ts +49 -6
  14. data/app/components/primer/alpha/action_menu.rb +0 -269
  15. data/app/components/primer/alpha/auto_complete/item.rb +0 -12
  16. data/app/components/primer/alpha/auto_complete.css +1 -1
  17. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  18. data/app/components/primer/alpha/auto_complete.rb +0 -47
  19. data/app/components/primer/alpha/banner.css +1 -1
  20. data/app/components/primer/alpha/banner.css.map +1 -1
  21. data/app/components/primer/alpha/banner.rb +0 -31
  22. data/app/components/primer/alpha/button_marketing.rb +0 -12
  23. data/app/components/primer/alpha/dialog.css +1 -1
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/dialog.rb +2 -18
  26. data/app/components/primer/alpha/dropdown.css +1 -1
  27. data/app/components/primer/alpha/dropdown.css.map +1 -1
  28. data/app/components/primer/alpha/dropdown.rb +0 -105
  29. data/app/components/primer/alpha/form_control.rb +0 -11
  30. data/app/components/primer/alpha/hellip_button.rb +0 -9
  31. data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
  32. data/app/components/primer/alpha/image.rb +0 -16
  33. data/app/components/primer/alpha/image_crop.rb +0 -11
  34. data/app/components/primer/alpha/layout.css +1 -1
  35. data/app/components/primer/alpha/layout.css.map +1 -1
  36. data/app/components/primer/alpha/layout.pcss +1 -1
  37. data/app/components/primer/alpha/layout.rb +0 -118
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.rb +0 -19
  41. data/app/components/primer/alpha/multi_input.rb +0 -33
  42. data/app/components/primer/alpha/nav_list.rb +0 -69
  43. data/app/components/primer/alpha/navigation/tab.rb +0 -35
  44. data/app/components/primer/alpha/octicon_symbols.rb +0 -6
  45. data/app/components/primer/alpha/overlay.rb +0 -14
  46. data/app/components/primer/alpha/segmented_control.css +1 -1
  47. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  48. data/app/components/primer/alpha/segmented_control.rb +0 -61
  49. data/app/components/primer/alpha/tab_container.rb +0 -18
  50. data/app/components/primer/alpha/tab_nav.css +1 -1
  51. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  52. data/app/components/primer/alpha/tab_nav.rb +0 -63
  53. data/app/components/primer/alpha/tab_panels.rb +0 -16
  54. data/app/components/primer/alpha/text_field.css +1 -1
  55. data/app/components/primer/alpha/text_field.css.map +1 -1
  56. data/app/components/primer/alpha/text_field.rb +0 -68
  57. data/app/components/primer/alpha/toggle_switch.css +1 -1
  58. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  59. data/app/components/primer/alpha/toggle_switch.rb +0 -18
  60. data/app/components/primer/alpha/tooltip.rb +1 -69
  61. data/app/components/primer/alpha/underline_nav.css +1 -1
  62. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  63. data/app/components/primer/alpha/underline_nav.rb +0 -61
  64. data/app/components/primer/alpha/underline_panels.rb +0 -19
  65. data/app/components/primer/beta/auto_complete/item.rb +0 -8
  66. data/app/components/primer/beta/auto_complete.rb +0 -56
  67. data/app/components/primer/beta/avatar.css +1 -1
  68. data/app/components/primer/beta/avatar.css.map +1 -1
  69. data/app/components/primer/beta/avatar.rb +0 -18
  70. data/app/components/primer/beta/avatar_stack.css +1 -1
  71. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  72. data/app/components/primer/beta/avatar_stack.rb +0 -21
  73. data/app/components/primer/beta/base_button.rb +0 -4
  74. data/app/components/primer/beta/blankslate.css +1 -1
  75. data/app/components/primer/beta/blankslate.css.map +1 -1
  76. data/app/components/primer/beta/blankslate.rb +0 -104
  77. data/app/components/primer/beta/border_box/header.rb +4 -11
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.map +1 -1
  80. data/app/components/primer/beta/border_box.html.erb +2 -2
  81. data/app/components/primer/beta/border_box.rb +11 -55
  82. data/app/components/primer/beta/breadcrumbs.rb +0 -7
  83. data/app/components/primer/beta/button.css +1 -1
  84. data/app/components/primer/beta/button.css.json +1 -0
  85. data/app/components/primer/beta/button.css.map +1 -1
  86. data/app/components/primer/beta/button.pcss +6 -2
  87. data/app/components/primer/beta/button.rb +7 -43
  88. data/app/components/primer/beta/button_group.css +1 -1
  89. data/app/components/primer/beta/button_group.css.map +1 -1
  90. data/app/components/primer/beta/button_group.rb +0 -16
  91. data/app/components/primer/beta/clipboard_copy.rb +0 -12
  92. data/app/components/primer/beta/close_button.rb +0 -3
  93. data/app/components/primer/beta/counter.rb +0 -8
  94. data/app/components/primer/beta/details.rb +0 -11
  95. data/app/components/primer/beta/flash.css +1 -1
  96. data/app/components/primer/beta/flash.css.map +1 -1
  97. data/app/components/primer/beta/flash.html.erb +1 -3
  98. data/app/components/primer/beta/flash.pcss +1 -2
  99. data/app/components/primer/beta/flash.rb +1 -23
  100. data/app/components/primer/beta/heading.rb +0 -8
  101. data/app/components/primer/beta/icon_button.rb +0 -21
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.rb +0 -20
  105. data/app/components/primer/beta/link.rb +0 -22
  106. data/app/components/primer/beta/markdown.rb +1 -262
  107. data/app/components/primer/beta/octicon.rb +0 -10
  108. data/app/components/primer/beta/popover.css +1 -1
  109. data/app/components/primer/beta/popover.css.map +1 -1
  110. data/app/components/primer/beta/popover.rb +0 -43
  111. data/app/components/primer/beta/progress_bar.rb +1 -22
  112. data/app/components/primer/beta/relative_time.rb +0 -9
  113. data/app/components/primer/beta/spinner.rb +2 -10
  114. data/app/components/primer/beta/state.rb +0 -13
  115. data/app/components/primer/beta/subhead.rb +0 -55
  116. data/app/components/primer/beta/text.rb +0 -4
  117. data/app/components/primer/beta/timeline_item.css +1 -1
  118. data/app/components/primer/beta/timeline_item.css.map +1 -1
  119. data/app/components/primer/beta/timeline_item.rb +0 -9
  120. data/app/components/primer/beta/truncate.rb +0 -50
  121. data/app/components/primer/blankslate_component.rb +0 -76
  122. data/app/components/primer/box.rb +0 -6
  123. data/app/components/primer/button_component.rb +0 -49
  124. data/app/components/primer/component.rb +1 -1
  125. data/app/components/primer/conditional_wrapper.rb +2 -17
  126. data/app/components/primer/icon_button.rb +0 -30
  127. data/app/components/primer/layout_component.rb +0 -12
  128. data/app/components/primer/tooltip.rb +0 -27
  129. data/app/components/primer/truncate.rb +0 -19
  130. data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
  131. data/lib/primer/accessibility.rb +1 -1
  132. data/lib/primer/deprecations.yml +3 -3
  133. data/lib/primer/forms/dsl/input.rb +1 -0
  134. data/lib/primer/static/generate_info_arch.rb +1 -0
  135. data/lib/primer/view_components/linters/details_menu_migration.rb +1 -1
  136. data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
  137. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  138. data/lib/primer/view_components/linters.rb +1 -0
  139. data/lib/primer/view_components/version.rb +1 -1
  140. data/lib/primer/view_components.rb +18 -0
  141. data/lib/primer/yard.rb +8 -9
  142. data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +3 -3
  143. data/previews/primer/alpha/tooltip_preview.rb +11 -23
  144. data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
  145. data/previews/primer/beta/button_preview/leading_visual_svg.html.erb +12 -0
  146. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  147. data/previews/primer/beta/button_preview/trailing_visual.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +22 -0
  149. data/static/arguments.json +12 -1
  150. data/static/info_arch.json +136 -15
  151. data/static/previews.json +13 -13
  152. metadata +4 -3
  153. data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
@@ -99,75 +99,6 @@ module Primer
99
99
  }
100
100
  }
101
101
 
102
- # @example Items and headings
103
- #
104
- # <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :personal_info)) do |component| %>
105
- # <% component.with_item(label: "General", selected_by_ids: :general, href: "/settings/general") %>
106
- # <% component.with_group do |group| %>
107
- # <% group.with_heading(title: "Account Settings") %>
108
- # <% group.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") %>
109
- # <% group.with_item(label: "Password", selected_by_ids: :password, href: "/account/password") %>
110
- # <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") %>
111
- # <% end %>
112
- # <% end %>
113
- #
114
- # @example Leading and trailing visuals
115
- #
116
- # <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :personal_info)) do |component| %>
117
- # <% component.with_group do |group| %>
118
- # <% group.with_heading(title: "Account Settings") %>
119
- # <% group.with_avatar_item(src: "https://github.com/github.png", username: "person", selected_by_ids: :personal_info, href: "/account/info") %>
120
- # <% group.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
121
- # <% item.with_leading_visual_icon(icon: :bell) %>
122
- # <% item.with_trailing_visual_counter(count: 15) %>
123
- # <% end %>
124
- # <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
125
- # <% item.with_leading_visual_icon(icon: :package) %>
126
- # <% item.with_trailing_visual_icon(icon: :"dot-fill", color: :attention) %>
127
- # <% end %>
128
- # <% end %>
129
- # <% end %>
130
- #
131
- # @example Expandable sub items
132
- #
133
- # <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :email_notifications)) do |component| %>
134
- # <% component.with_group do |group| %>
135
- # <% group.with_heading(title: "Account Settings") %>
136
- # <% group.with_item(label: "Notification settings") do |item| %>
137
- # <% item.with_leading_visual_icon(icon: :bell) %>
138
- # <% item.with_item(label: "Email", selected_by_ids: :email_notifications, href: "/account/notifications/email") do |subitem| %>
139
- # <% subitem.with_trailing_visual_icon(icon: :mail) %>
140
- # <% end %>
141
- # <% item.with_item(label: "SMS", selected_by_ids: :sms_notifications, href: "/account/notifications/sms") do |subitem| %>
142
- # <% subitem.with_trailing_visual_icon(icon: :"device-mobile") %>
143
- # <% end %>
144
- # <% end %>
145
- # <% group.with_item(label: "Messages") do |item| %>
146
- # <% item.with_leading_visual_icon(icon: :bookmark) %>
147
- # <% item.with_item(label: "Inbox", href: "/account/messages/inbox") do |subitem| %>
148
- # <% subitem.with_trailing_visual_counter(count: 10) %>
149
- # <% end %>
150
- # <% item.with_item(label: "Organizer", href: "/account/messages/organizer") do |subitem| %>
151
- # <% subitem.with_trailing_visual_label(scheme: :primary) { "New" } %>
152
- # <% end %>
153
- # <% end %>
154
- # <% end %>
155
- # <% end %>
156
- #
157
- # @example Trailing action
158
- #
159
- # <%= render(Primer::Alpha::NavList.new(aria: { label: "Foods" })) do |component| %>
160
- # <% component.with_group do |group| %>
161
- # <% group.with_heading(title: "My Favorite Foods") %>
162
- # <% group.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
163
- # <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
164
- # <% end %>
165
- # <% group.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
166
- # <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
167
- # <% end %>
168
- # <% end %>
169
- # <% end %>
170
- #
171
102
  # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
172
103
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
173
104
  def initialize(selected_item_id: nil, **system_arguments)
@@ -65,41 +65,6 @@ module Primer
65
65
 
66
66
  attr_reader :selected
67
67
 
68
- # @example Default
69
- # <%= render(Primer::Alpha::Navigation::Tab.new(selected: true)) do |component| %>
70
- # <% component.with_text { "Selected" } %>
71
- # <% end %>
72
- # <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
73
- # <% component.with_text { "Not selected" } %>
74
- # <% end %>
75
- #
76
- # @example With icons and counters
77
- # <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
78
- # <% component.with_icon(:star) %>
79
- # <% component.with_text { "Tab" } %>
80
- # <% end %>
81
- # <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
82
- # <% component.with_icon(:star) %>
83
- # <% component.with_text { "Tab" } %>
84
- # <% component.with_counter(count: 10) %>
85
- # <% end %>
86
- # <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
87
- # <% component.with_text { "Tab" } %>
88
- # <% component.with_counter(count: 10) %>
89
- # <% end %>
90
- #
91
- # @example Inside a list
92
- # <%= render(Primer::Alpha::Navigation::Tab.new(list: true)) do |component| %>
93
- # <% component.with_text { "Tab" } %>
94
- # <% end %>
95
- #
96
- # @example With custom HTML
97
- # <%= render(Primer::Alpha::Navigation::Tab.new) do %>
98
- # <div>
99
- # This is my <strong>custom HTML</strong>
100
- # </div>
101
- # <% end %>
102
- #
103
68
  # @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
104
69
  # @param selected [Boolean] Whether the Tab is selected or not.
105
70
  # @param with_panel [Boolean] Whether the Tab has an associated panel.
@@ -6,12 +6,6 @@ module Primer
6
6
  module Alpha
7
7
  # OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
8
8
  class OcticonSymbols < Primer::Component
9
- # @example Symbol dictionary
10
- # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
11
- # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
12
- # <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
13
- # <%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
14
- #
15
9
  # @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
16
10
  def initialize(icons: [])
17
11
  @icons = {}
@@ -122,20 +122,6 @@ module Primer
122
122
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
123
123
  renders_one :footer, "Footer"
124
124
 
125
- # @example Overlay with Cancel and Submit buttons
126
- # @description
127
- # An ID is provided which enables wiring of the open and close buttons to the Overlay.
128
- # @code
129
- # <%= render(Primer::Alpha::Overlay.new(
130
- # title: "Overlay Example",
131
- # id: "my-Overlay",
132
- # role: :dialog,
133
- # )) do |d| %>
134
- # <% d.with_show_button { "Show Overlay" } %>
135
- # <% d.with_body do %>
136
- # <p>Some content</p>
137
- # <% end %>
138
- # <% end %>
139
125
  # @param id [String] The id of the Overlay.
140
126
  # @param title [String] Describes the content of the Overlay.
141
127
  # @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
@@ -1 +1 @@
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%}
1
+ .SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);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,.375rem) - 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%}
@@ -1 +1 @@
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]}
1
+ {"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,gDAAyC,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,4DAAqD,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]}
@@ -28,67 +28,6 @@ module Primer
28
28
  )
29
29
  }
30
30
 
31
- # @example With a label above and caption below
32
- # <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
33
- # <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
34
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
35
- # <% component.with_item(label: "Preview", selected: true) %>
36
- # <% component.with_item(label: "Raw") %>
37
- # <% component.with_item(label: "Blame") %>
38
- # <% end %>
39
- # <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
40
- # <% end %>
41
- #
42
- # @example With a label and caption on the left
43
- # <%= render(Primer::Beta::Subhead.new) do |component| %>
44
- # <% component.with_heading(id: "scLabel-vert") { "File view" } %>
45
- # <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
46
- # <% component.with_actions do %>
47
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
48
- # <% component.with_item(label: "Preview", selected: true) %>
49
- # <% component.with_item(label: "Raw") %>
50
- # <% component.with_item(label: "Blame") %>
51
- # <% end %>
52
- # <% end %>
53
- # <% end %>
54
- #
55
- # @example Basic usage
56
- #
57
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
58
- # <%= component.with_item(label: "Preview", selected: true) %>
59
- # <%= component.with_item(label: "Raw") %>
60
- # <%= component.with_item(label: "Blame") %>
61
- # <% end %>
62
- #
63
- # @example Small
64
- #
65
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
66
- # <%= component.with_item(label: "Preview", selected: true) %>
67
- # <%= component.with_item(label: "Raw") %>
68
- # <%= component.with_item(label: "Blame") %>
69
- # <% end %>
70
- #
71
- # @example With icons
72
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
73
- # <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
74
- # <%= component.with_item(label: "Raw", icon: :"file-code") %>
75
- # <%= component.with_item(label: "Blame", icon: :people) %>
76
- # <% end %>
77
- #
78
- # @example With icons only
79
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
80
- # <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
81
- # <%= component.with_item(label: "Raw", icon: :"file-code") %>
82
- # <%= component.with_item(label: "Blame", icon: :people) %>
83
- # <% end %>
84
- #
85
- # @example Fill width of parent
86
- # <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
87
- # <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
88
- # <%= component.with_item(label: "Raw", icon: :"file-code") %>
89
- # <%= component.with_item(label: "Blame", icon: :people) %>
90
- # <% end %>
91
- #
92
31
  # @param hide_labels [Boolean] Whether to hide the labels and only show the icons
93
32
  # @param full_width [Boolean] If the component should be full width
94
33
  # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
@@ -7,24 +7,6 @@ module Primer
7
7
  #
8
8
  # This component requires javascript.
9
9
  class TabContainer < Primer::Component
10
- # @example Default
11
- # <%= render(Primer::Alpha::TabContainer.new) do %>
12
- # <div role="tablist">
13
- # <button type="button" role="tab" aria-selected="true">Tab one</button>
14
- # <button type="button" role="tab" tabindex="-1">Tab two</button>
15
- # <button type="button" role="tab" tabindex="-1">Tab three</button>
16
- # </div>
17
- # <div role="tabpanel">
18
- # Panel 1
19
- # </div>
20
- # <div role="tabpanel" hidden>
21
- # Panel 2
22
- # </div>
23
- # <div role="tabpanel" hidden>
24
- # Panel 3
25
- # </div>
26
- # <% end %>
27
- #
28
10
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
29
11
  def initialize(**system_arguments)
30
12
  @system_arguments = deny_tag_argument(**system_arguments)
@@ -1 +1 @@
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
+ .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,.375rem) var(--borderRadius-medium,.375rem) 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,.375rem) var(--borderRadius-medium,.375rem) 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,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"]}
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,uFAAwE,CAHxE,oDAQF,CAHE,oIACE,aACF,CAGF,kBACE,oDAA6B,CAC7B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iGAEF,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"]}
@@ -44,69 +44,6 @@ module Primer
44
44
  view_context.capture { block&.call }
45
45
  }
46
46
 
47
- # @example Default with `<nav>`
48
- # @description
49
- # `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
50
- # @code
51
- # <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
52
- # <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
53
- # <% component.with_tab(href: "#") { "Tab 2" } %>
54
- # <% component.with_tab(href: "#") { "Tab 3" } %>
55
- # <% end %>
56
- #
57
- # @example Default with `<div>`
58
- # <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |component| %>
59
- # <% component.with_tab(selected: true, href: "#") { "Tab 1" } %>
60
- # <% component.with_tab(href: "#") { "Tab 2" } %>
61
- # <% component.with_tab(href: "#") { "Tab 3" } %>
62
- # <% end %>
63
- #
64
- # @example With icons and counters
65
- # <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
66
- # <% component.with_tab(href: "#", selected: true) do |tab| %>
67
- # <% tab.with_icon(icon: :star) %>
68
- # <% tab.with_text { "Item 1" } %>
69
- # <% end %>
70
- # <% component.with_tab(href: "#") do |tab| %>
71
- # <% tab.with_icon(icon: :star) %>
72
- # <% tab.with_text { "Item 2" } %>
73
- # <% tab.with_counter(count: 10) %>
74
- # <% end %>
75
- # <% component.with_tab(href: "#") do |tab| %>
76
- # <% tab.with_text { "Item 3" } %>
77
- # <% tab.with_counter(count: 10) %>
78
- # <% end %>
79
- # <% end %>
80
- #
81
- # @example With extra content
82
- # <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |component| %>
83
- # <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
84
- # <% component.with_tab(href: "#") { "Tab 2" } %>
85
- # <% component.with_tab(href: "#") { "Tab 3" } %>
86
- # <% component.with_extra do %>
87
- # <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
88
- # <% end %>
89
- # <% end %>
90
- #
91
- # @example Adding extra content after the tabs
92
- # <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |component| %>
93
- # <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
94
- # <% component.with_tab(href: "#") { "Tab 2" } %>
95
- # <% component.with_tab(href: "#") { "Tab 3" } %>
96
- # <% component.with_extra(align: :right) do %>
97
- # <div>
98
- # <%= render(Primer::ButtonComponent.new) { "Button" } %>
99
- # </div>
100
- # <% end %>
101
- # <% end %>
102
- #
103
- # @example Customizing the body
104
- # <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |component| %>
105
- # <% component.with_tab(selected: true, href: "#") { "Tab 1" }%>
106
- # <% component.with_tab(href: "#") { "Tab 2" } %>
107
- # <% component.with_tab(href: "#") { "Tab 3" } %>
108
- # <% end %>
109
- #
110
47
  # @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>
111
48
  # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements.
112
49
  # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
@@ -41,22 +41,6 @@ module Primer
41
41
  view_context.capture { block&.call }
42
42
  }
43
43
 
44
- # @example Default
45
- # <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
46
- # <% component.with_tab(id: "tab-1", selected: true) do |tab| %>
47
- # <% tab.with_text { "Tab 1" } %>
48
- # <% tab.with_panel do %>
49
- # Panel 1
50
- # <% end %>
51
- # <% end %>
52
- # <% component.with_tab(id: "tab-2") do |tab| %>
53
- # <% tab.with_text { "Tab 2" } %>
54
- # <% tab.with_panel do %>
55
- # Panel 2
56
- # <% end %>
57
- # <% end %>
58
- # <% end %>
59
- #
60
44
  # @param label [String] Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs.
61
45
  # @param align [Symbol] <%= one_of(Primer::TabNavHelper::EXTRA_ALIGN_OPTIONS) %> - Defaults to <%= Primer::TabNavHelper::EXTRA_ALIGN_DEFAULT %>
62
46
  # @param body_arguments [Hash] <%= link_to_system_arguments_docs %> for the body wrapper.
@@ -1 +1 @@
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)}}
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.4285);-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.3333)}.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,.375rem);font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);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,.1875rem);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,.1875rem);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,624.9375rem);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)}}