primer_view_components 0.1.9 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -3
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list/item.rb +2 -2
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +16 -16
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.pcss +145 -145
  13. data/app/components/primer/alpha/action_list.rb +30 -15
  14. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -1
  15. data/app/components/primer/alpha/action_menu/action_menu_element.js +44 -34
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +32 -30
  17. data/app/components/primer/alpha/action_menu/list.rb +6 -1
  18. data/app/components/primer/alpha/auto_complete.css +1 -1
  19. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  20. data/app/components/primer/alpha/auto_complete.pcss +3 -3
  21. data/app/components/primer/alpha/banner.css +1 -1
  22. data/app/components/primer/alpha/banner.css.map +1 -1
  23. data/app/components/primer/alpha/banner.pcss +11 -11
  24. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  25. data/app/components/primer/alpha/button_marketing.pcss +5 -12
  26. data/app/components/primer/alpha/button_marketing.rb +3 -0
  27. data/app/components/primer/alpha/dialog.css +1 -1
  28. data/app/components/primer/alpha/dialog.css.map +1 -1
  29. data/app/components/primer/alpha/dialog.pcss +36 -36
  30. data/app/components/primer/alpha/dropdown.css +1 -1
  31. data/app/components/primer/alpha/dropdown.css.map +1 -1
  32. data/app/components/primer/alpha/dropdown.pcss +12 -12
  33. data/app/components/primer/alpha/form_control.html.erb +1 -1
  34. data/app/components/primer/alpha/hellip_button.rb +3 -1
  35. data/app/components/primer/alpha/layout.css +1 -1
  36. data/app/components/primer/alpha/layout.css.map +1 -1
  37. data/app/components/primer/alpha/layout.pcss +4 -4
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.pcss +21 -21
  41. data/app/components/primer/alpha/modal_dialog.js +11 -4
  42. data/app/components/primer/alpha/modal_dialog.ts +11 -4
  43. data/app/components/primer/alpha/nav_list/item.rb +2 -0
  44. data/app/components/primer/alpha/nav_list.js +6 -0
  45. data/app/components/primer/alpha/nav_list.rb +55 -36
  46. data/app/components/primer/alpha/nav_list.ts +8 -0
  47. data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
  48. data/app/components/primer/alpha/overlay.css +1 -1
  49. data/app/components/primer/alpha/overlay.css.json +1 -2
  50. data/app/components/primer/alpha/overlay.css.map +1 -1
  51. data/app/components/primer/alpha/overlay.pcss +14 -4
  52. data/app/components/primer/alpha/segmented_control.css +1 -1
  53. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  54. data/app/components/primer/alpha/segmented_control.pcss +24 -33
  55. data/app/components/primer/alpha/tab_nav.css +1 -1
  56. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  57. data/app/components/primer/alpha/tab_nav.pcss +12 -12
  58. data/app/components/primer/alpha/text_field.css +1 -3
  59. data/app/components/primer/alpha/text_field.css.json +1 -0
  60. data/app/components/primer/alpha/text_field.css.map +1 -1
  61. data/app/components/primer/alpha/text_field.pcss +87 -83
  62. data/app/components/primer/alpha/toggle_switch.css +1 -1
  63. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  64. data/app/components/primer/alpha/toggle_switch.pcss +12 -12
  65. data/app/components/primer/alpha/underline_nav.css +1 -1
  66. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  67. data/app/components/primer/alpha/underline_nav.pcss +11 -11
  68. data/app/components/primer/beta/avatar.css +1 -1
  69. data/app/components/primer/beta/avatar.css.map +1 -1
  70. data/app/components/primer/beta/avatar.pcss +18 -18
  71. data/app/components/primer/beta/avatar_stack.css +1 -1
  72. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  73. data/app/components/primer/beta/avatar_stack.pcss +5 -5
  74. data/app/components/primer/beta/base_button.rb +11 -0
  75. data/app/components/primer/beta/blankslate.css +1 -1
  76. data/app/components/primer/beta/blankslate.css.map +1 -1
  77. data/app/components/primer/beta/blankslate.pcss +16 -16
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.json +1 -1
  80. data/app/components/primer/beta/border_box.css.map +1 -1
  81. data/app/components/primer/beta/border_box.pcss +40 -42
  82. data/app/components/primer/beta/button.css +1 -1
  83. data/app/components/primer/beta/button.css.json +4 -0
  84. data/app/components/primer/beta/button.css.map +1 -1
  85. data/app/components/primer/beta/button.pcss +39 -24
  86. data/app/components/primer/beta/button.rb +3 -0
  87. data/app/components/primer/beta/button_group.css +1 -0
  88. data/app/components/primer/beta/button_group.css.json +14 -0
  89. data/app/components/primer/beta/button_group.css.map +1 -0
  90. data/app/components/primer/beta/button_group.pcss +27 -0
  91. data/app/components/primer/beta/button_group.rb +19 -19
  92. data/app/components/primer/beta/close_button.rb +3 -1
  93. data/app/components/primer/beta/counter.css +1 -1
  94. data/app/components/primer/beta/counter.css.map +1 -1
  95. data/app/components/primer/beta/counter.pcss +5 -5
  96. data/app/components/primer/beta/details.html.erb +6 -2
  97. data/app/components/primer/beta/details.rb +18 -10
  98. data/app/components/primer/beta/flash.css +1 -1
  99. data/app/components/primer/beta/flash.css.map +1 -1
  100. data/app/components/primer/beta/flash.pcss +12 -12
  101. data/app/components/primer/beta/icon_button.rb +7 -3
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.pcss +3 -3
  105. data/app/components/primer/beta/popover.css +1 -1
  106. data/app/components/primer/beta/popover.css.map +1 -1
  107. data/app/components/primer/beta/popover.pcss +4 -4
  108. data/app/components/primer/beta/state.css +1 -1
  109. data/app/components/primer/beta/state.css.map +1 -1
  110. data/app/components/primer/beta/state.pcss +7 -7
  111. data/app/components/primer/beta/subhead.css +1 -1
  112. data/app/components/primer/beta/subhead.css.map +1 -1
  113. data/app/components/primer/beta/subhead.pcss +9 -9
  114. data/app/components/primer/beta/timeline_item.css +1 -1
  115. data/app/components/primer/beta/timeline_item.css.map +1 -1
  116. data/app/components/primer/beta/timeline_item.pcss +18 -18
  117. data/app/components/primer/beta/truncate.css +1 -1
  118. data/app/components/primer/beta/truncate.css.map +1 -1
  119. data/app/components/primer/beta/truncate.pcss +1 -1
  120. data/app/components/primer/focus_group.js +1 -10
  121. data/app/components/primer/focus_group.ts +1 -10
  122. data/app/components/primer/primer.d.ts +1 -0
  123. data/app/components/primer/primer.js +1 -0
  124. data/app/components/primer/primer.pcss +1 -0
  125. data/app/components/primer/primer.ts +1 -0
  126. data/lib/postcss_mixins/activeIndicatorLine.pcss +4 -4
  127. data/lib/primer/accessibility.rb +74 -0
  128. data/lib/primer/forms/form_control.html.erb +1 -1
  129. data/lib/primer/static/generate_previews.rb +15 -8
  130. data/lib/primer/view_components/linters/deprecated_components_counter.rb +37 -13
  131. data/lib/primer/view_components/version.rb +2 -2
  132. data/lib/primer/yard/lookbook_pages_backend.rb +3 -3
  133. data/previews/pages/forms/03_caption_templates.md.erb +1 -1
  134. data/previews/pages/forms/04_after_content.md.erb +1 -1
  135. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +1 -1
  136. data/previews/pages/forms/07_toggle_switch_forms.md.erb +1 -1
  137. data/previews/primer/alpha/action_menu_preview/two_menus.html.erb +13 -0
  138. data/previews/primer/alpha/action_menu_preview/with_actions.html.erb +21 -0
  139. data/previews/primer/alpha/action_menu_preview.rb +5 -13
  140. data/previews/primer/alpha/button_marketing_preview.rb +3 -2
  141. data/previews/primer/alpha/dialog_preview.rb +4 -3
  142. data/previews/primer/alpha/hellip_button_preview.rb +3 -2
  143. data/previews/primer/alpha/nav_list_preview.rb +1 -1
  144. data/previews/primer/beta/base_button_preview.rb +9 -2
  145. data/previews/primer/beta/button_group_preview/action_menus.html.erb +8 -0
  146. data/previews/primer/beta/button_group_preview.rb +49 -11
  147. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +5 -2
  149. data/previews/primer/beta/close_button_preview.rb +3 -2
  150. data/previews/primer/beta/details_preview.rb +11 -8
  151. data/previews/primer/forms_preview.rb +44 -0
  152. data/static/arguments.json +4 -4
  153. data/static/classes.json +378 -372
  154. data/static/constants.json +0 -1
  155. data/static/info_arch.json +5150 -1368
  156. data/static/previews.json +5197 -1433
  157. metadata +37 -29
  158. data/previews/primer/forms/forms_preview.rb +0 -48
  159. /data/previews/primer/{forms/forms_preview → forms_preview}/after_content_form.html.erb +0 -0
  160. /data/previews/primer/{forms/forms_preview → forms_preview}/array_check_box_group_form.html.erb +0 -0
  161. /data/previews/primer/{forms/forms_preview → forms_preview}/caption_template_form.html.erb +0 -0
  162. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_group_form.html.erb +0 -0
  163. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_with_nested_form.html.erb +0 -0
  164. /data/previews/primer/{forms/forms_preview → forms_preview}/composed_form.html.erb +0 -0
  165. /data/previews/primer/{forms/forms_preview → forms_preview}/example_toggle_switch_form.html.erb +0 -0
  166. /data/previews/primer/{forms/forms_preview → forms_preview}/horizontal_form.html.erb +0 -0
  167. /data/previews/primer/{forms/forms_preview → forms_preview}/immediate_validation_form.html.erb +0 -0
  168. /data/previews/primer/{forms/forms_preview → forms_preview}/invalid_form.html.erb +0 -0
  169. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_input_form.html.erb +0 -0
  170. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_text_field_form.html.erb +0 -0
  171. /data/previews/primer/{forms/forms_preview → forms_preview}/name_with_question_mark_form.html.erb +0 -0
  172. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_group_form.html.erb +0 -0
  173. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_with_nested_form.html.erb +0 -0
  174. /data/previews/primer/{forms/forms_preview → forms_preview}/select_form.html.erb +0 -0
  175. /data/previews/primer/{forms/forms_preview → forms_preview}/single_text_field_form.html.erb +0 -0
  176. /data/previews/primer/{forms/forms_preview → forms_preview}/submit_button_form.html.erb +0 -0
  177. /data/previews/primer/{forms/forms_preview → forms_preview}/text_field_and_checkbox_form.html.erb +0 -0
@@ -4,7 +4,7 @@
4
4
  .FormControl {
5
5
  display: inline-flex;
6
6
  flex-direction: column;
7
- gap: var(--base-size-4, 4px);
7
+ gap: var(--base-size-4);
8
8
  }
9
9
 
10
10
  /* fill container */
@@ -14,9 +14,9 @@
14
14
 
15
15
  /* <label> */
16
16
  .FormControl-label {
17
- font-size: var(--text-body-size-medium, 14px);
18
- font-weight: var(--base-text-weight-semibold, 600);
19
- line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
17
+ font-size: var(--text-body-size-medium);
18
+ font-weight: var(--base-text-weight-semibold);
19
+ line-height: var(--text-body-lineHeight-medium);
20
20
  color: var(--color-fg-default);
21
21
  user-select: none;
22
22
  }
@@ -24,28 +24,35 @@
24
24
  /* optional caption */
25
25
  .FormControl-caption {
26
26
  margin-bottom: 0;
27
- font-size: var(--text-caption-size, 12px);
28
- font-weight: var(--text-caption-weight, 400);
29
- line-height: var(--text-caption-lineHeight, calc(16 / 12));
27
+ font-size: var(--text-caption-size);
28
+ font-weight: var(--text-caption-weight);
29
+ line-height: var(--text-caption-lineHeight);
30
30
  color: var(--color-fg-muted);
31
31
  }
32
32
 
33
33
  /* inline validation message */
34
34
  .FormControl-inlineValidation {
35
35
  display: flex;
36
- font-size: var(--text-caption-size, 12px);
37
- font-weight: var(--base-text-weight-semibold, 600);
36
+ font-size: var(--text-caption-size);
37
+ line-height: var(--text-caption-lineHeight);
38
+ font-weight: var(--base-text-weight-semibold);
38
39
  color: var(--color-danger-fg);
39
40
  fill: var(--color-danger-fg);
40
41
  flex-direction: row;
41
- align-items: center;
42
- gap: var(--base-size-4, 4px);
42
+ align-items: flex-start;
43
+ gap: var(--base-size-4);
43
44
 
44
45
  & p {
45
46
  margin-bottom: 0;
46
47
  }
47
48
  }
48
49
 
50
+ .FormControl-inlineValidation--visual {
51
+ align-items: center;
52
+ display: flex;
53
+ min-height: var(--base-size-16);
54
+ }
55
+
49
56
  .FormControl-spacingWrapper {
50
57
  display: flex;
51
58
  flex-direction: column;
@@ -61,7 +68,7 @@
61
68
  @define-mixin Field {
62
69
  color: var(--color-fg-default);
63
70
  background-color: var(--color-canvas-default);
64
- border: var(--borderWidth-thin, 1px) solid var(--color-border-default);
71
+ border: var(--borderWidth-thin) solid var(--color-border-default);
65
72
 
66
73
  &[disabled] {
67
74
  color: var(--color-primer-fg-disabled);
@@ -131,12 +138,12 @@
131
138
  @mixin Field;
132
139
 
133
140
  width: 100%;
134
- font-size: var(--text-body-size-medium, 14px);
135
- line-height: var(--text-body-lineHeight-medium, calc(20 / 14));
136
- border-radius: var(--borderRadius-medium, 6px);
141
+ font-size: var(--text-body-size-medium);
142
+ line-height: var(--text-body-lineHeight-medium);
143
+ border-radius: var(--borderRadius-medium);
137
144
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
138
145
  transition-property: color, background-color, box-shadow, border-color;
139
- padding-inline: var(--control-medium-paddingInline-condensed, 8px);
146
+ padding-inline: var(--control-medium-paddingInline-condensed);
140
147
  padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));
141
148
 
142
149
  &[disabled] {
@@ -157,20 +164,20 @@
157
164
  /* sizes */
158
165
 
159
166
  &.FormControl-small {
160
- height: var(--control-small-size, 28px);
161
- padding-inline: var(--control-small-paddingInline-normal, 8px);
162
- padding-block: var(--control-small-paddingBlock, 4px);
163
- font-size: var(--text-body-size-small, 12px);
167
+ height: var(--control-small-size);
168
+ padding-inline: var(--control-small-paddingInline-normal);
169
+ padding-block: var(--control-small-paddingBlock);
170
+ font-size: var(--text-body-size-small);
164
171
  }
165
172
 
166
173
  &.FormControl-medium {
167
- height: var(--control-medium-size, 32px);
174
+ height: var(--control-medium-size);
168
175
  }
169
176
 
170
177
  &.FormControl-large {
171
- height: var(--control-large-size, 40px);
172
- padding-inline: var(--control-large-paddingInline-normal, 12px);
173
- padding-block: var(--control-large-paddingBlock, 10px);
178
+ height: var(--control-large-size);
179
+ padding-inline: var(--control-large-paddingInline-normal);
180
+ padding-block: var(--control-large-paddingBlock);
174
181
  }
175
182
 
176
183
  /* variants */
@@ -185,10 +192,7 @@
185
192
  }
186
193
 
187
194
  &.FormControl-monospace {
188
- font-family: var(
189
- --fontStack-monospace,
190
- 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
191
- );
195
+ font-family: var(--fontStack-monospace);
192
196
  }
193
197
 
194
198
  /* validation states */
@@ -209,7 +213,7 @@
209
213
  .FormControl-toggleSwitchInput {
210
214
  display: flex;
211
215
  align-items: flex-start;
212
- gap: var(--base-size-16, 16px);
216
+ gap: var(--base-size-16);
213
217
  }
214
218
 
215
219
  /* positioning for leading/trailing items for TextInput */
@@ -219,11 +223,11 @@
219
223
 
220
224
  & .FormControl-input-leadingVisualWrap {
221
225
  position: absolute;
222
- top: var(--base-size-8, 8px);
223
- left: var(--base-size-8, 8px);
226
+ top: var(--base-size-8);
227
+ left: var(--base-size-8);
224
228
  display: block;
225
- width: var(--base-size-16, 16px);
226
- height: var(--base-size-16, 16px);
229
+ width: var(--base-size-16);
230
+ height: var(--base-size-16);
227
231
  color: var(--color-fg-muted);
228
232
  pointer-events: none;
229
233
 
@@ -237,12 +241,12 @@
237
241
  /* TODO: replace with new Button component */
238
242
  & .FormControl-input-trailingAction {
239
243
  position: absolute;
240
- top: var(--base-size-4, 4px);
241
- right: var(--base-size-4, 4px);
244
+ top: var(--base-size-4);
245
+ right: var(--base-size-4);
242
246
  z-index: 4;
243
247
  display: grid;
244
- width: var(--control-xsmall-size, 24px);
245
- height: var(--control-xsmall-size, 24px);
248
+ width: var(--control-xsmall-size);
249
+ height: var(--control-xsmall-size);
246
250
  padding: 0;
247
251
  color: var(--color-fg-muted);
248
252
  cursor: pointer;
@@ -276,7 +280,7 @@
276
280
  &::before {
277
281
  position: absolute;
278
282
  top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
279
- left: calc(var(--base-size-4, 4px) * -1);
283
+ left: calc(var(--base-size-4) * -1);
280
284
  display: block;
281
285
  width: var(--borderWidth-thin);
282
286
  height: var(--base-size-16);
@@ -286,11 +290,11 @@
286
290
  }
287
291
 
288
292
  &::after {
289
- @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
293
+ @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
290
294
 
291
295
  @media (pointer: coarse) {
292
- min-width: var(--control-minTarget-coarse, 44px);
293
- min-height: var(--control-minTarget-coarse, 44px);
296
+ min-width: var(--control-minTarget-coarse);
297
+ min-height: var(--control-minTarget-coarse);
294
298
  }
295
299
  }
296
300
  }
@@ -308,7 +312,7 @@
308
312
  &.FormControl-input-wrap--leadingVisual {
309
313
  & .FormControl-input {
310
314
  padding-inline-start: calc(
311
- var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
315
+ var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
312
316
  ); /* 32px */
313
317
  }
314
318
  }
@@ -325,7 +329,7 @@
325
329
  &.FormControl-input-wrap--trailingAction {
326
330
  & .FormControl-input {
327
331
  padding-inline-end: calc(
328
- var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-medium-gap, 8px)
332
+ var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
329
333
  ); /* 32px */
330
334
  }
331
335
 
@@ -343,8 +347,8 @@
343
347
  &.FormControl-input-wrap-trailingAction--divider {
344
348
  & .FormControl-input {
345
349
  padding-inline-end: calc(
346
- var(--control-medium-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
347
- var(--control-medium-gap, 8px) + var(--borderWidth-thin, 1px)
350
+ var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
351
+ var(--borderWidth-thin)
348
352
  ); /* 33px */
349
353
  }
350
354
  }
@@ -354,8 +358,8 @@
354
358
  // sizes */
355
359
  &.FormControl-input-wrap--small {
356
360
  & .FormControl-input-leadingVisualWrap {
357
- top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
358
- left: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
361
+ top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
362
+ left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
359
363
  }
360
364
 
361
365
  /*
@@ -369,7 +373,7 @@
369
373
  &.FormControl-input-wrap--trailingAction {
370
374
  & .FormControl-input.FormControl-small {
371
375
  padding-inline-end: calc(
372
- var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) + var(--control-small-gap, 8px)
376
+ var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
373
377
  ); /* 28px */
374
378
  }
375
379
 
@@ -385,16 +389,16 @@
385
389
  &.FormControl-input-wrap-trailingAction--divider {
386
390
  & .FormControl-input.FormControl-small {
387
391
  padding-inline-end: calc(
388
- var(--control-small-paddingInline-condensed, 8px) + var(--base-size-16, 16px) +
389
- var(--control-small-gap, 8px) + var(--borderWidth-thin, 1px)
392
+ var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
393
+ var(--borderWidth-thin)
390
394
  ); /* 29px */
391
395
  }
392
396
  }
393
397
  }
394
398
 
395
399
  & .FormControl-input-trailingAction {
396
- width: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
397
- height: calc(var(--control-small-size, 28px) - var(--base-size-8, 8px));
400
+ width: calc(var(--control-small-size) - var(--base-size-8));
401
+ height: calc(var(--control-small-size) - var(--base-size-8));
398
402
 
399
403
  &::before {
400
404
  top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
@@ -404,8 +408,8 @@
404
408
 
405
409
  &.FormControl-input-wrap--large {
406
410
  & .FormControl-input-leadingVisualWrap {
407
- top: var(--control-medium-paddingInline-normal, 12px);
408
- left: var(--control-medium-paddingInline-normal, 12px);
411
+ top: var(--control-medium-paddingInline-normal);
412
+ left: var(--control-medium-paddingInline-normal);
409
413
  }
410
414
 
411
415
  /*
@@ -419,7 +423,7 @@
419
423
  &.FormControl-input-wrap--leadingVisual {
420
424
  & .FormControl-input.FormControl-large {
421
425
  padding-inline-start: calc(
422
- var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
426
+ var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
423
427
  ); /* 36px */
424
428
  }
425
429
  }
@@ -435,7 +439,7 @@
435
439
  &.FormControl-input-wrap--trailingAction {
436
440
  & .FormControl-input.FormControl-large {
437
441
  padding-inline-end: calc(
438
- var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px)
442
+ var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
439
443
  ); /* 36px */
440
444
  }
441
445
 
@@ -450,18 +454,18 @@
450
454
  &.FormControl-input-wrap-trailingAction--divider {
451
455
  & .FormControl-input.FormControl-large {
452
456
  padding-inline-end: calc(
453
- var(--control-large-paddingInline-normal, 12px) + var(--base-size-16, 16px) + var(--control-large-gap, 8px) +
454
- var(--borderWidth-thin, 1px)
457
+ var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
458
+ var(--borderWidth-thin)
455
459
  ); /* 37px */
456
460
  }
457
461
  }
458
462
  }
459
463
 
460
464
  & .FormControl-input-trailingAction {
461
- top: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
462
- right: calc(var(--control-medium-paddingInline-condensed, 8px) - 0.125rem); /* 6px */
463
- width: var(--control-small-size, 28px);
464
- height: var(--control-small-size, 28px);
465
+ top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
466
+ right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */
467
+ width: var(--control-small-size);
468
+ height: var(--control-small-size);
465
469
 
466
470
  &::before {
467
471
  top: unset;
@@ -473,13 +477,13 @@
473
477
 
474
478
  .FormControl-select-wrap {
475
479
  display: grid;
476
- grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
480
+ grid-template-columns: minmax(0, auto) var(--base-size-16);
477
481
 
478
482
  /* mask allows for background-color to respect themes */
479
483
  &::after {
480
- width: var(--base-size-16, 16px);
481
- height: var(--base-size-16, 16px);
482
- padding-right: var(--base-size-4, 4px);
484
+ width: var(--base-size-16);
485
+ height: var(--base-size-16);
486
+ padding-right: var(--base-size-4);
483
487
  pointer-events: none;
484
488
  content: '';
485
489
  background-color: var(--color-fg-muted);
@@ -496,7 +500,7 @@
496
500
  grid-column: 1/-1;
497
501
  grid-row: 1;
498
502
  appearance: none;
499
- padding-right: var(--base-size-20, 20px);
503
+ padding-right: var(--base-size-20);
500
504
  }
501
505
  }
502
506
 
@@ -515,13 +519,13 @@
515
519
  .FormControl-radio-wrap {
516
520
  display: inline-grid;
517
521
  grid-template-columns: min-content auto;
518
- gap: var(--base-size-8, 8px);
522
+ gap: var(--base-size-8);
519
523
 
520
524
  & .FormControl-checkbox-labelWrap,
521
525
  & .FormControl-radio-labelWrap {
522
526
  display: flex;
523
527
  flex-direction: column;
524
- gap: var(--base-size-4, 4px);
528
+ gap: var(--base-size-4);
525
529
  }
526
530
 
527
531
  & .FormControl-label {
@@ -552,25 +556,25 @@ input[type='checkbox'].FormControl-checkbox {
552
556
 
553
557
  position: relative;
554
558
  display: grid;
555
- width: var(--base-size-16, 16px);
556
- height: var(--base-size-16, 16px);
559
+ width: var(--base-size-16);
560
+ height: var(--base-size-16);
557
561
  margin: 0;
558
562
  margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
559
563
  cursor: pointer;
560
564
  border-color: var(--color-neutral-emphasis);
561
- border-radius: var(--borderRadius-small, 3px);
565
+ border-radius: var(--borderRadius-small);
562
566
  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
563
567
  appearance: none;
564
568
  place-content: center;
565
569
 
566
570
  &::before {
567
- width: var(--base-size-16, 16px);
568
- height: var(--base-size-16, 16px);
571
+ width: var(--base-size-16);
572
+ height: var(--base-size-16);
569
573
  visibility: hidden;
570
574
  content: '';
571
575
  background-color: var(--color-fg-on-emphasis);
572
576
  transition: visibility 0s linear 230ms;
573
- clip-path: inset(var(--base-size-16, 16px) 0 0 0);
577
+ clip-path: inset(var(--base-size-16) 0 0 0);
574
578
 
575
579
  /* octicon checkmark image */
576
580
  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
@@ -585,7 +589,7 @@ input[type='checkbox'].FormControl-checkbox {
585
589
 
586
590
  /* extend touch target */
587
591
  &::after {
588
- @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
592
+ @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
589
593
  }
590
594
 
591
595
  &[disabled] {
@@ -646,23 +650,23 @@ input[type='radio'].FormControl-radio {
646
650
  @mixin Field;
647
651
 
648
652
  position: relative;
649
- width: var(--base-size-16, 16px);
650
- height: var(--base-size-16, 16px);
653
+ width: var(--base-size-16);
654
+ height: var(--base-size-16);
651
655
  margin: 0;
652
656
  margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */
653
657
  cursor: pointer;
654
658
  border-color: var(--color-neutral-emphasis);
655
- border-radius: var(--borderRadius-full, 100vh);
659
+ border-radius: var(--borderRadius-full);
656
660
  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
657
661
  appearance: none;
658
662
 
659
663
  &::after {
660
- @mixin minTouchTarget var(--control-medium-size, 32px) var(--control-medium-size, 32px);
664
+ @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);
661
665
  }
662
666
 
663
667
  &:checked {
664
668
  border-color: var(--color-accent-fg);
665
- border-width: var(--base-size-4, 4px);
669
+ border-width: var(--base-size-4);
666
670
 
667
671
  &:disabled {
668
672
  cursor: not-allowed;
@@ -683,7 +687,7 @@ input[type='radio'].FormControl-radio {
683
687
 
684
688
  @keyframes checkmarkIn {
685
689
  from {
686
- clip-path: inset(var(--base-size-16, 16px) 0 0 0);
690
+ clip-path: inset(var(--base-size-16) 0 0 0);
687
691
  }
688
692
 
689
693
  to {
@@ -697,6 +701,6 @@ input[type='radio'].FormControl-radio {
697
701
  }
698
702
 
699
703
  to {
700
- clip-path: inset(var(--base-size-16, 16px) 0 0 0);
704
+ clip-path: inset(var(--base-size-16) 0 0 0);
701
705
  }
702
706
  }
@@ -1 +1 @@
1
- .ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,8px)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,32px);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,64px)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--borderWidth-thin,1px) solid var(--color-switch-knob-border);border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--text-body-size-medium,14px);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,16px)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,12px)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,24px);width:var(--base-size-48,48px)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
1
+ .ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed,.5rem)}.ToggleSwitch--checked .ToggleSwitch-statusOn{height:auto;visibility:visible}.ToggleSwitch--checked .ToggleSwitch-statusOff{height:0;visibility:hidden}.ToggleSwitch-track{-webkit-appearance:none;appearance:none;background-color:var(--color-switch-track-bg);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-switch-track-border);border-radius:var(--borderRadius-medium,6px);cursor:pointer;display:block;height:var(--control-medium-size,2rem);overflow:hidden;padding:0;position:relative;text-decoration:none;transition-duration:80ms;transition-property:background-color,border-color;transition-timing-function:cubic-bezier(.5,1,.89,1);-webkit-user-select:none;user-select:none;width:var(--base-size-64,4rem)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--color-switch-track-hover-bg)}.ToggleSwitch-track:active{background-color:var(--color-switch-track-active-bg)}@media (pointer:coarse){.ToggleSwitch-track:before{content:"";height:100%;left:50%;min-height:44px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}@media (prefers-reduced-motion){.ToggleSwitch-track,.ToggleSwitch-track *{transition:none}}.ToggleSwitch-track[aria-pressed=true][disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;color:var(--color-switch-track-checked-disabled-fg)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--color-switch-track-checked-bg);border-color:var(--color-switch-track-checked-border)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--color-switch-track-checked-hover-bg)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--color-switch-track-checked-active-bg)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--color-switch-knob-checked-bg);border-color:var(--color-switch-knob-checked-border);transform:translateX(100%)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-lineIcon{transform:translateX(0)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-circleIcon{transform:translateX(100%)}.ToggleSwitch-track[disabled]{background-color:var(--color-switch-track-disabled-bg);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--color-border-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--color-switch-track-disabled-fg)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--color-switch-track-checked-fg);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--color-switch-track-fg);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--color-switch-knob-bg);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-switch-knob-border);border-radius:var(--borderRadius-medium,6px);bottom:0;box-shadow:var(--color-shadow-medium),var(--color-btn-inset-shadow);position:absolute;top:0;transition-duration:80ms;transition-property:transform;transition-timing-function:cubic-bezier(.5,1,.89,1);width:50%;z-index:1}@media (prefers-reduced-motion){.ToggleSwitch-knob{transition:none}}.ToggleSwitch-status{color:var(--color-fg-default);font-size:var(--text-body-size-medium,.875rem);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16,1rem)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small,.75rem)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size,1.5rem);width:var(--base-size-48,3rem)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--color-fg-muted)}.ToggleSwitch-statusOn{height:0;visibility:hidden}.ToggleSwitch-statusOff{height:auto;visibility:visible}.ToggleSwitch--statusAtEnd{flex-direction:row-reverse}.ToggleSwitch--statusAtEnd .ToggleSwitch-status{text-align:left}
@@ -1 +1 @@
1
- {"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,gDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,6CAA8C,CAC9C,yEAA2E,CAC3E,4CAA8C,CAJ9C,cAAe,CANf,aAAc,CAEd,sCAAwC,CAExC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,mDACF,CAEA,2BACE,oDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,sDAAuD,CAEvD,kBAAyB,CADzB,mDAEF,CAEA,uCACE,qDAAsD,CACtD,qDAyBF,CAtBI,6DACE,2DACF,CAEA,8DACE,4DACF,CAGF,0DACE,oDAAqD,CACrD,oDAAqD,CACrD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,sDAAuD,CACvD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,wCAAyC,CACzC,eACF,CAMA,4GACE,2CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,0CAA2C,CAG3C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,kCAAmC,CAGnC,uBAEF,CAEA,mBAME,4CAA6C,CAC7C,wEAA0E,CAC1E,4CAA8C,CAL9C,QAAS,CAMT,mEAAqE,CARrE,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,2CAA6C,CAC7C,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,0CACF,CAEA,yCAEE,sCAAwC,CADxC,8BAEF,CAIA,6CACE,2BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n align-items: center;\n display: inline-flex;\n gap: var(--controlStack-medium-gap-condensed, 8px);\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64, 64px);\n height: var(--control-medium-size, 32px);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--color-switch-track-bg);\n border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);\n border-radius: var(--borderRadius-medium, 6px);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 1px;\n }\n\n &:hover {\n background-color: var(--color-switch-track-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-active-bg);\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n background-color: var(--color-switch-track-disabled-bg);\n color: var(--color-switch-track-checked-disabled-fg);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--color-switch-track-checked-bg);\n border-color: var(--color-switch-track-checked-border);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--color-switch-track-checked-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-checked-active-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-bg);\n border-color: var(--color-switch-knob-checked-border);\n transform: translateX(100%);\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[disabled] {\n cursor: not-allowed;\n background-color: var(--color-switch-track-disabled-bg);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--color-border-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n line-height: 0;\n color: var(--color-switch-track-checked-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n line-height: 0;\n color: var(--color-switch-track-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n width: 50%;\n background-color: var(--color-switch-knob-bg);\n border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);\n border-radius: var(--borderRadius-medium, 6px);\n box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--text-body-size-medium, 14px);\n line-height: 1.5;\n color: var(--color-fg-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n width: var(--base-size-16, 16px);\n display: flex;\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--text-body-size-small, 12px);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48, 48px);\n height: var(--control-xsmall-size, 24px);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--color-fg-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}\n",null]}
1
+ {"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,kDACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,6CAA8C,CAC9C,uFAAsE,CACtE,4CAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,sCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,8BAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,mDACF,CAEA,2BACE,oDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,sDAAuD,CAEvD,kBAAyB,CADzB,mDAEF,CAEA,uCACE,qDAAsD,CACtD,qDAyBF,CAtBI,6DACE,2DACF,CAEA,8DACE,4DACF,CAGF,0DACE,oDAAqD,CACrD,oDAAqD,CACrD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,sDAAuD,CACvD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,wCAAyC,CACzC,eACF,CAMA,4GACE,2CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,0CAA2C,CAG3C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,kCAAmC,CAGnC,uBAEF,CAEA,mBAME,4CAA6C,CAC7C,sFAAqE,CACrE,4CAAyC,CALzC,QAAS,CAMT,mEAAqE,CARrE,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,6BAA8B,CAF9B,8CAAuC,CACvC,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,8BAGF,CAGE,0CACE,4CACF,CAEA,yCAEE,wCAAkC,CADlC,8BAEF,CAIA,6CACE,2BACF,CAGF,uBACE,QAAS,CACT,iBACF,CAEA,wBACE,WAAY,CACZ,kBACF,CAEA,2BACE,0BAKF,CAHE,gDACE,eACF","file":"toggle_switch.css","sourcesContent":["/* ToggleSwitch */\n\n/* Catalyst in dotcom applies a display: block to all web component elements. This\n** rule overrides it so the status label and toggle switch are laid out correctly. */\n.ToggleSwitch.ToggleSwitch {\n display: inline-flex;\n}\n\n.ToggleSwitch {\n align-items: center;\n display: inline-flex;\n gap: var(--controlStack-medium-gap-condensed);\n}\n\n.ToggleSwitch--checked {\n & .ToggleSwitch-statusOn {\n height: auto;\n visibility: visible;\n }\n\n & .ToggleSwitch-statusOff {\n height: 0;\n visibility: hidden;\n }\n}\n\n.ToggleSwitch-track {\n position: relative;\n display: block;\n width: var(--base-size-64);\n height: var(--control-medium-size);\n padding: 0;\n overflow: hidden;\n text-decoration: none;\n cursor: pointer;\n user-select: none;\n background-color: var(--color-switch-track-bg);\n border: var(--borderWidth-thin) solid var(--color-switch-track-border);\n border-radius: var(--borderRadius-medium);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: background-color, border-color;\n appearance: none;\n\n &:focus,\n &:focus-visible {\n outline-offset: 1px;\n }\n\n &:hover {\n background-color: var(--color-switch-track-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-active-bg);\n }\n\n @media (pointer: coarse) {\n &::before {\n @mixin minTouchTarget 44px;\n }\n }\n\n @media (prefers-reduced-motion) {\n transition: none;\n\n & * {\n transition: none;\n }\n }\n}\n\n.ToggleSwitch-track[aria-pressed='true'][disabled] {\n background-color: var(--color-switch-track-disabled-bg);\n color: var(--color-switch-track-checked-disabled-fg);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--color-switch-track-checked-bg);\n border-color: var(--color-switch-track-checked-border);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--color-switch-track-checked-hover-bg);\n }\n\n &:active {\n background-color: var(--color-switch-track-checked-active-bg);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--color-switch-knob-checked-bg);\n border-color: var(--color-switch-knob-checked-border);\n transform: translateX(100%);\n }\n\n & .ToggleSwitch-lineIcon {\n transform: translateX(0%);\n }\n\n & .ToggleSwitch-circleIcon {\n transform: translateX(100%);\n }\n}\n\n.ToggleSwitch-track[disabled] {\n cursor: not-allowed;\n background-color: var(--color-switch-track-disabled-bg);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--color-border-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--color-switch-track-disabled-fg);\n }\n}\n\n.ToggleSwitch-icons {\n display: flex;\n align-items: center;\n width: 100%;\n height: 100%;\n overflow: hidden;\n}\n\n.ToggleSwitch-lineIcon {\n line-height: 0;\n color: var(--color-switch-track-checked-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(-100%);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-circleIcon {\n line-height: 0;\n color: var(--color-switch-track-fg);\n transition-duration: 80ms;\n transition-property: transform;\n transform: translateX(0);\n flex: 1 0 50%;\n}\n\n.ToggleSwitch-knob {\n position: absolute;\n top: 0;\n bottom: 0;\n z-index: 1;\n width: 50%;\n background-color: var(--color-switch-knob-bg);\n border: var(--borderWidth-thin) solid var(--color-switch-knob-border);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);\n transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);\n transition-duration: 80ms;\n transition-property: transform;\n\n @media (prefers-reduced-motion) {\n transition: none;\n }\n}\n\n.ToggleSwitch-status {\n position: relative;\n font-size: var(--text-body-size-medium);\n line-height: 1.5;\n color: var(--color-fg-default);\n text-align: right;\n}\n\n.ToggleSwitch-statusIcon {\n width: var(--base-size-16);\n display: flex;\n margin-top: 0.063rem;\n}\n\n.ToggleSwitch--small {\n & .ToggleSwitch-status {\n font-size: var(--text-body-size-small);\n }\n\n & .ToggleSwitch-track {\n width: var(--base-size-48);\n height: var(--control-xsmall-size);\n }\n}\n\n.ToggleSwitch--disabled {\n & .ToggleSwitch-status {\n color: var(--color-fg-muted);\n }\n}\n\n.ToggleSwitch-statusOn {\n height: 0;\n visibility: hidden;\n}\n\n.ToggleSwitch-statusOff {\n height: auto;\n visibility: visible;\n}\n\n.ToggleSwitch--statusAtEnd {\n flex-direction: row-reverse;\n\n & .ToggleSwitch-status {\n text-align: left;\n }\n}\n",null]}
@@ -9,7 +9,7 @@
9
9
  .ToggleSwitch {
10
10
  align-items: center;
11
11
  display: inline-flex;
12
- gap: var(--controlStack-medium-gap-condensed, 8px);
12
+ gap: var(--controlStack-medium-gap-condensed);
13
13
  }
14
14
 
15
15
  .ToggleSwitch--checked {
@@ -27,16 +27,16 @@
27
27
  .ToggleSwitch-track {
28
28
  position: relative;
29
29
  display: block;
30
- width: var(--base-size-64, 64px);
31
- height: var(--control-medium-size, 32px);
30
+ width: var(--base-size-64);
31
+ height: var(--control-medium-size);
32
32
  padding: 0;
33
33
  overflow: hidden;
34
34
  text-decoration: none;
35
35
  cursor: pointer;
36
36
  user-select: none;
37
37
  background-color: var(--color-switch-track-bg);
38
- border: var(--borderWidth-thin, 1px) solid var(--color-switch-track-border);
39
- border-radius: var(--borderRadius-medium, 6px);
38
+ border: var(--borderWidth-thin) solid var(--color-switch-track-border);
39
+ border-radius: var(--borderRadius-medium);
40
40
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
41
41
  transition-duration: 80ms;
42
42
  transition-property: background-color, border-color;
@@ -158,8 +158,8 @@
158
158
  z-index: 1;
159
159
  width: 50%;
160
160
  background-color: var(--color-switch-knob-bg);
161
- border: var(--borderWidth-thin, 1px) solid var(--color-switch-knob-border);
162
- border-radius: var(--borderRadius-medium, 6px);
161
+ border: var(--borderWidth-thin) solid var(--color-switch-knob-border);
162
+ border-radius: var(--borderRadius-medium);
163
163
  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
164
164
  transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
165
165
  transition-duration: 80ms;
@@ -172,26 +172,26 @@
172
172
 
173
173
  .ToggleSwitch-status {
174
174
  position: relative;
175
- font-size: var(--text-body-size-medium, 14px);
175
+ font-size: var(--text-body-size-medium);
176
176
  line-height: 1.5;
177
177
  color: var(--color-fg-default);
178
178
  text-align: right;
179
179
  }
180
180
 
181
181
  .ToggleSwitch-statusIcon {
182
- width: var(--base-size-16, 16px);
182
+ width: var(--base-size-16);
183
183
  display: flex;
184
184
  margin-top: 0.063rem;
185
185
  }
186
186
 
187
187
  .ToggleSwitch--small {
188
188
  & .ToggleSwitch-status {
189
- font-size: var(--text-body-size-small, 12px);
189
+ font-size: var(--text-body-size-small);
190
190
  }
191
191
 
192
192
  & .ToggleSwitch-track {
193
- width: var(--base-size-48, 48px);
194
- height: var(--control-xsmall-size, 24px);
193
+ width: var(--base-size-48);
194
+ height: var(--control-xsmall-size);
195
195
  }
196
196
  }
197
197
 
@@ -1 +1 @@
1
- .UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,48px);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,8px)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,8px);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,14px);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,8px);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,48px)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,8px)}.UnderlineNav-container{display:flex;justify-content:space-between}
1
+ .UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}
@@ -1 +1 @@
1
- {"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,yCAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,iCAAmC,CACnC,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAA8C,CAN9C,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,2CAA6C,CAC7C,gBAAiB,CAFjB,2DAA6D,CAF7D,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAA8C,CAL9C,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,0CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48, 48px);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap, 8px);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--control-medium-gap, 8px);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--control-medium-paddingInline-condensed, 8px);\n font-size: var(--text-body-size-medium, 14px);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium, 6px);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n z-index: 1; /* raise above full-width flash banner */\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--borderRadius-medium, 6px);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48, 48px);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--control-medium-gap, 8px);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
1
+ {"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,2CAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--control-medium-gap);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--control-medium-paddingInline-condensed);\n font-size: var(--text-body-size-medium);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [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 /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n z-index: 1; /* raise above full-width flash banner */\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--borderRadius-medium);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--control-medium-gap);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}