primer_view_components 0.31.0 → 0.32.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (92) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +21 -0
  3. data/app/assets/javascripts/app/components/primer/shared_events.d.ts +2 -0
  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 -1
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list.css +1 -1
  9. data/app/components/primer/alpha/action_list.css.json +33 -50
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_menu/action_menu_element.js +20 -7
  12. data/app/components/primer/alpha/action_menu/action_menu_element.ts +20 -7
  13. data/app/components/primer/alpha/auto_complete.css +1 -1
  14. data/app/components/primer/alpha/auto_complete.css.json +3 -5
  15. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  16. data/app/components/primer/alpha/banner.css +1 -1
  17. data/app/components/primer/alpha/banner.css.json +5 -5
  18. data/app/components/primer/alpha/banner.css.map +1 -1
  19. data/app/components/primer/alpha/button_marketing.css +1 -1
  20. data/app/components/primer/alpha/button_marketing.css.json +1 -4
  21. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  22. data/app/components/primer/alpha/dialog.css +1 -1
  23. data/app/components/primer/alpha/dialog.css.json +7 -7
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/layout.css +1 -1
  26. data/app/components/primer/alpha/layout.css.json +9 -15
  27. data/app/components/primer/alpha/layout.css.map +1 -1
  28. data/app/components/primer/alpha/menu.css +1 -1
  29. data/app/components/primer/alpha/menu.css.json +1 -3
  30. data/app/components/primer/alpha/menu.css.map +1 -1
  31. data/app/components/primer/alpha/segmented_control.css +1 -1
  32. data/app/components/primer/alpha/segmented_control.css.json +5 -5
  33. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  34. data/app/components/primer/alpha/select_panel.rb +3 -3
  35. data/app/components/primer/alpha/select_panel_element.js +25 -15
  36. data/app/components/primer/alpha/select_panel_element.ts +26 -16
  37. data/app/components/primer/alpha/tab_nav.css +1 -1
  38. data/app/components/primer/alpha/tab_nav.css.json +1 -3
  39. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  40. data/app/components/primer/alpha/text_field.css +1 -1
  41. data/app/components/primer/alpha/text_field.css.json +37 -78
  42. data/app/components/primer/alpha/text_field.css.map +1 -1
  43. data/app/components/primer/alpha/toggle_switch.css +1 -1
  44. data/app/components/primer/alpha/toggle_switch.css.json +1 -1
  45. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  46. data/app/components/primer/alpha/toggle_switch.rb +2 -1
  47. data/app/components/primer/alpha/underline_nav.css +1 -1
  48. data/app/components/primer/alpha/underline_nav.css.json +2 -4
  49. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  50. data/app/components/primer/beta/avatar_stack.css +1 -1
  51. data/app/components/primer/beta/avatar_stack.css.json +8 -8
  52. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  53. data/app/components/primer/beta/border_box.css +1 -1
  54. data/app/components/primer/beta/border_box.css.json +4 -4
  55. data/app/components/primer/beta/border_box.css.map +1 -1
  56. data/app/components/primer/beta/breadcrumbs.css +1 -1
  57. data/app/components/primer/beta/breadcrumbs.css.json +1 -2
  58. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  59. data/app/components/primer/beta/button.css +1 -1
  60. data/app/components/primer/beta/button.css.json +6 -8
  61. data/app/components/primer/beta/button.css.map +1 -1
  62. data/app/components/primer/beta/button_group.css +1 -1
  63. data/app/components/primer/beta/button_group.css.json +3 -3
  64. data/app/components/primer/beta/button_group.css.map +1 -1
  65. data/app/components/primer/beta/label.css +1 -1
  66. data/app/components/primer/beta/label.css.json +1 -2
  67. data/app/components/primer/beta/label.css.map +1 -1
  68. data/app/components/primer/beta/link.css +1 -1
  69. data/app/components/primer/beta/link.css.json +1 -3
  70. data/app/components/primer/beta/link.css.map +1 -1
  71. data/app/components/primer/beta/popover.css +1 -1
  72. data/app/components/primer/beta/popover.css.json +16 -22
  73. data/app/components/primer/beta/popover.css.map +1 -1
  74. data/app/components/primer/beta/spinner.html.erb +1 -1
  75. data/app/components/primer/beta/truncate.css +1 -1
  76. data/app/components/primer/beta/truncate.css.json +5 -5
  77. data/app/components/primer/beta/truncate.css.map +1 -1
  78. data/app/components/primer/shared_events.d.ts +2 -0
  79. data/app/components/primer/shared_events.ts +2 -0
  80. data/lib/primer/forms/primer_text_field.js +3 -0
  81. data/lib/primer/forms/primer_text_field.ts +4 -0
  82. data/lib/primer/view_components/version.rb +1 -1
  83. data/previews/primer/alpha/select_panel_preview/no_values.html.erb +19 -0
  84. data/previews/primer/alpha/select_panel_preview/playground.html.erb +1 -1
  85. data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +4 -1
  86. data/previews/primer/alpha/select_panel_preview/single_select.html.erb +4 -4
  87. data/previews/primer/alpha/select_panel_preview.rb +14 -9
  88. data/static/arguments.json +1 -1
  89. data/static/classes.json +39 -21
  90. data/static/info_arch.json +15 -2
  91. data/static/previews.json +13 -0
  92. metadata +3 -2
data/app/components/primer/alpha/tab_nav.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,sEAAuE,CADvE,qCAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,8CAAiD,CACjD,eACF,CAEA,YAQE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,sCAAuC,CACvC,gBAAiB,CAFjB,uEAAwE,CAIxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,oIACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAMF,CAHA,qBACE,qCAEF,CAEA,qBAEE,aAAc,CADd,oCAEF,CAQF,cAKE,0BAA2B,CAJ3B,oBAAqB,CAGrB,qCAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YACE,oDACF","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: hidden;\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,sEAAuE,CADvE,qCAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,8CAAiD,CACjD,eACF,CAEA,YAQE,wBAA6B,CAE7B,0CAAgB,CAAhB,eAAgB,CAJhB,0BAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,sCAAuC,CACvC,gBAAiB,CAFjB,uEAAwE,CAIxE,4BAAqB,CAArB,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,uCAAwC,CACxC,uCAAwC,CACxC,uEAAwE,CAHxE,4BAQF,CAHE,uHACE,aACF,CAGF,kBACE,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iFAAmF,CACnF,mBACF,CAMA,wCAHE,0BAMF,CAHA,qBACE,qCAEF,CAEA,qBAEE,aAAc,CADd,oCAEF,CAQF,cAKE,0BAA2B,CAJ3B,oBAAqB,CAGrB,qCAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,2BAA4B,CAC5B,4BAAqB,CAArB,oBACF,CAOA,YACE,oDACF","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: hidden;\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"]}
data/app/components/primer/alpha/text_field.css CHANGED
@@ -1 +1 @@
1
- .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium)}.FormControl-caption{color:var(--fgColor-muted);font-weight:var(--text-caption-weight);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{color:var(--control-borderColor-danger);display:flex;font-weight:var(--base-text-weight-semibold);fill:var(--control-borderColor-danger);align-items:flex-start;flex-direction:row;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success);fill:var(--control-borderColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.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);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-inset);color:var(--fgColor-default);font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-input[invalid=true]:not(:focus),.FormControl-select[invalid=true]:not(:focus),.FormControl-textarea[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-input[invalid=false]:not(:focus),.FormControl-select[invalid=false]:not(:focus),.FormControl-textarea[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.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);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);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);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);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);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled)}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled)}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder);opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small);height:var(--control-small-size);padding-block:var(--control-small-paddingBlock);padding-inline:var(--control-small-paddingInline-normal)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size);padding-block:var(--control-large-paddingBlock);padding-inline:var(--control-large-paddingInline-normal)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted)}.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)}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger)}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success)}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted);display:block;height:var(--base-size-16);left:var(--base-size-8);pointer-events:none;position:absolute;top:var(--base-size-8);width:var(--base-size-16)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--fgColor-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size);justify-content:center;padding:0;position:absolute;right:var(--base-size-4);top:var(--base-size-4);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size);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);pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover)}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active)}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);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);min-width:var(--control-minTarget-coarse)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .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) + var(--base-size-16) + var(--control-small-gap))}.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) + var(--base-size-16) + var(--control-small-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size) - var(--base-size-8));width:calc(var(--control-small-size) - var(--base-size-8))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal);top:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.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) + var(--base-size-16) + var(--control-large-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size);right:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem);width:var(--control-small-size)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis);content:"";grid-column:2;grid-row:1;height:var(--base-size-16);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4);place-self:center end;pointer-events:none;width:var(--base-size-16)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8);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)}.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{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);box-shadow:var(--shadow-inset);color:var(--fgColor-default);cursor:pointer;display:grid;height:var(--base-size-16);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)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest);clip-path:inset(var(--base-size-16) 0 0 0);content:"";height:var(--base-size-16);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");-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)}@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) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label{color:var(--control-fgColor-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);border-color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@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);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);box-shadow:var(--shadow-inset);color:var(--fgColor-default);cursor:pointer;height:var(--base-size-16);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:checked:disabled~.FormControl-radio-labelWrap .FormControl-label,input.FormControl-radio[type=radio][disabled]:checked~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);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) 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) 0 0 0)}}
1
+ .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium)}.FormControl-caption{color:var(--fgColor-muted);font-weight:var(--text-caption-weight);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{color:var(--control-borderColor-danger);display:flex;font-weight:var(--base-text-weight-semibold);fill:var(--control-borderColor-danger);align-items:flex-start;flex-direction:row;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success);fill:var(--control-borderColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.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);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-danger)}[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-success)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-disabled)}[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-placeholder);opacity:1}.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-size:var(--text-body-size-small);height:var(--control-small-size);padding-block:var(--control-small-paddingBlock);padding-inline:var(--control-small-paddingInline-normal)}.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-medium-size)}.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-large-size);padding-block:var(--control-large-paddingBlock);padding-inline:var(--control-large-paddingInline-normal)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--bgColor-muted)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible{background-color:var(--bgColor-default)}.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-family:var(--fontStack-monospace)}.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-danger)}.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-success)}.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-warning)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted);display:block;height:var(--base-size-16);left:var(--base-size-8);pointer-events:none;position:absolute;top:var(--base-size-8);width:var(--base-size-16)}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--fgColor-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size);justify-content:center;padding:0;position:absolute;right:var(--base-size-4);top:var(--base-size-4);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size);z-index:4}:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg{-webkit-user-select:none;user-select:none}[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction){color:var(--control-fgColor-disabled);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover{background:var(--control-transparent-bgColor-hover)}:is(.FormControl-input-wrap .FormControl-input-trailingAction):active{background:var(--control-transparent-bgColor-active)}.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before{background:var(--borderColor-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-height:var(--control-minTarget-coarse);min-width:var(--control-minTarget-coarse)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .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) + var(--base-size-16) + var(--control-small-gap))}.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) + var(--base-size-16) + var(--control-small-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size) - var(--base-size-8));width:calc(var(--control-small-size) - var(--base-size-8))}:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal);top:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.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) + var(--base-size-16) + var(--control-large-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size);right:calc(var(--control-medium-paddingInline-condensed) - .125rem);top:calc(var(--control-medium-paddingInline-condensed) - .125rem);width:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis);content:"";grid-column:2;grid-row:1;height:var(--base-size-16);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4);place-self:center end;pointer-events:none;width:var(--base-size-16)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8);grid-template-columns:min-content auto}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4)}:is(.FormControl-checkbox-wrap,.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);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);cursor:pointer;display:grid;height:var(--base-size-16);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)}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest);clip-path:inset(var(--base-size-16) 0 0 0);content:"";height:var(--base-size-16);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");-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)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}:is(input.FormControl-checkbox[type=checkbox]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-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);border-color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@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);outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}input[type=radio].FormControl-radio{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);cursor:pointer;height:var(--base-size-16);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}:is(input.FormControl-radio[type=radio]:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled);cursor:not-allowed}:is(:is(input.FormControl-radio[type=radio][disabled]:checked,input.FormControl-radio[type=radio]:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);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) 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) 0 0 0)}}
data/app/components/primer/alpha/text_field.css.json CHANGED
@@ -14,74 +14,37 @@
14
14
  ".FormControl-input",
15
15
  ".FormControl-select",
16
16
  ".FormControl-textarea",
17
- ".FormControl-input[disabled]",
18
- ".FormControl-select[disabled]",
19
- ".FormControl-textarea[disabled]",
20
- ".FormControl-input[invalid=true]:not(:focus)",
21
- ".FormControl-select[invalid=true]:not(:focus)",
22
- ".FormControl-textarea[invalid=true]:not(:focus)",
23
- ".FormControl-input[invalid=false]:not(:focus)",
24
- ".FormControl-select[invalid=false]:not(:focus)",
25
- ".FormControl-textarea[invalid=false]:not(:focus)",
26
- ".FormControl-input:not([type=checkbox],[type=radio]):focus",
27
- ".FormControl-select:not([type=checkbox],[type=radio]):focus",
28
- ".FormControl-textarea:not([type=checkbox],[type=radio]):focus",
29
- ".FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
30
- ".FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
31
- ".FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
32
- ".FormControl-input:not([type=checkbox],[type=radio]):focus-visible",
33
- ".FormControl-select:not([type=checkbox],[type=radio]):focus-visible",
34
- ".FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible",
35
- ".FormControl-input[disabled]::placeholder",
36
- ".FormControl-select[disabled]::placeholder",
37
- ".FormControl-textarea[disabled]::placeholder",
38
- ".FormControl-input[readonly]",
39
- ".FormControl-select[readonly]",
40
- ".FormControl-textarea[readonly]",
41
- ".FormControl-input::placeholder",
42
- ".FormControl-select::placeholder",
43
- ".FormControl-textarea::placeholder",
44
- ".FormControl-input.FormControl-small",
45
- ".FormControl-select.FormControl-small",
46
- ".FormControl-textarea.FormControl-small",
47
- ".FormControl-input.FormControl-medium",
48
- ".FormControl-select.FormControl-medium",
49
- ".FormControl-textarea.FormControl-medium",
50
- ".FormControl-input.FormControl-large",
51
- ".FormControl-select.FormControl-large",
52
- ".FormControl-textarea.FormControl-large",
53
- ".FormControl-input.FormControl-inset",
54
- ".FormControl-select.FormControl-inset",
55
- ".FormControl-textarea.FormControl-inset",
56
- ".FormControl-input.FormControl-inset:focus",
57
- ".FormControl-input.FormControl-inset:focus-visible",
58
- ".FormControl-select.FormControl-inset:focus",
59
- ".FormControl-select.FormControl-inset:focus-visible",
60
- ".FormControl-textarea.FormControl-inset:focus",
61
- ".FormControl-textarea.FormControl-inset:focus-visible",
62
- ".FormControl-input.FormControl-monospace",
63
- ".FormControl-select.FormControl-monospace",
64
- ".FormControl-textarea.FormControl-monospace",
65
- ".FormControl-input.FormControl-error",
66
- ".FormControl-select.FormControl-error",
67
- ".FormControl-textarea.FormControl-error",
68
- ".FormControl-input.FormControl-success",
69
- ".FormControl-select.FormControl-success",
70
- ".FormControl-textarea.FormControl-success",
71
- ".FormControl-input.FormControl-warning",
72
- ".FormControl-select.FormControl-warning",
73
- ".FormControl-textarea.FormControl-warning",
17
+ "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
18
+ "[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
19
+ "[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus)",
20
+ ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus",
21
+ ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
22
+ ":is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible",
23
+ "[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
24
+ "[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
25
+ ":is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder",
26
+ ".FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
27
+ ".FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
28
+ ".FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
29
+ ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
30
+ ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus",
31
+ ".FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible",
32
+ ".FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
33
+ ".FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
34
+ ".FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
35
+ ".FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea)",
74
36
  ".FormControl-toggleSwitchInput",
75
37
  ".FormControl-input-wrap",
76
38
  ".FormControl-input-wrap .FormControl-input-leadingVisualWrap",
77
- ".FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual",
39
+ ":is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual",
78
40
  ".FormControl-input-wrap .FormControl-input-trailingAction",
79
- ".FormControl-input-wrap .FormControl-input-trailingAction svg",
80
- ".FormControl-input-wrap .FormControl-input-trailingAction[disabled]",
81
- ".FormControl-input-wrap .FormControl-input-trailingAction:hover",
82
- ".FormControl-input-wrap .FormControl-input-trailingAction:active",
83
- ".FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before",
84
- ".FormControl-input-wrap .FormControl-input-trailingAction:after",
41
+ ":is(.FormControl-input-wrap .FormControl-input-trailingAction) svg",
42
+ "[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction)",
43
+ ":is(.FormControl-input-wrap .FormControl-input-trailingAction):hover",
44
+ ":is(.FormControl-input-wrap .FormControl-input-trailingAction):active",
45
+ ".FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before",
46
+ ":is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after)",
47
+ ":is(.FormControl-input-wrap .FormControl-input-trailingAction):after",
85
48
  ".FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input",
86
49
  ".FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input",
87
50
  ".FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input",
@@ -89,13 +52,13 @@
89
52
  ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small",
90
53
  ".FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small",
91
54
  ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction",
92
- ".FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before",
55
+ ":is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before",
93
56
  ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap",
94
57
  ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large",
95
58
  ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large",
96
59
  ".FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large",
97
60
  ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction",
98
- ".FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before",
61
+ ":is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before",
99
62
  ".FormControl-select-wrap",
100
63
  ".FormControl-select-wrap:after",
101
64
  ".FormControl-select-wrap .FormControl-select",
@@ -103,12 +66,9 @@
103
66
  ".FormControl-select-wrap[data-multiple] .FormControl-select",
104
67
  ".FormControl-checkbox-wrap",
105
68
  ".FormControl-radio-wrap",
106
- ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
107
- ".FormControl-checkbox-wrap .FormControl-radio-labelWrap",
108
- ".FormControl-radio-wrap .FormControl-checkbox-labelWrap",
109
- ".FormControl-radio-wrap .FormControl-radio-labelWrap",
110
- ".FormControl-checkbox-wrap .FormControl-label",
111
- ".FormControl-radio-wrap .FormControl-label",
69
+ ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap",
70
+ ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap",
71
+ ":is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label",
112
72
  ".FormControl-check-group-wrap fieldset",
113
73
  ".FormControl-radio-group-wrap fieldset",
114
74
  "input[type=checkbox].FormControl-checkbox",
@@ -119,8 +79,8 @@
119
79
  "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
120
80
  "input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible",
121
81
  "input.FormControl-checkbox[type=checkbox]:before",
122
- "input.FormControl-checkbox[type=checkbox]:after",
123
- "input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label",
82
+ ":is(input.FormControl-checkbox[type=checkbox]:after)",
83
+ ":is(input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap) .FormControl-label",
124
84
  "input.FormControl-checkbox[type=checkbox]:checked",
125
85
  "input.FormControl-checkbox[type=checkbox]:checked:before",
126
86
  "input.FormControl-checkbox[type=checkbox]:checked:disabled",
@@ -134,13 +94,12 @@
134
94
  "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus",
135
95
  "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible)",
136
96
  "input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible",
137
- "input.FormControl-radio[type=radio]:after",
138
- "input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label",
97
+ ":is(input.FormControl-radio[type=radio]:after)",
98
+ ":is(input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap) .FormControl-label",
139
99
  "input.FormControl-radio[type=radio]:checked",
140
100
  "input.FormControl-radio[type=radio]:checked:disabled",
141
101
  "input.FormControl-radio[type=radio][disabled]:checked",
142
- "input.FormControl-radio[type=radio]:checked:disabled~.FormControl-radio-labelWrap .FormControl-label",
143
- "input.FormControl-radio[type=radio][disabled]:checked~.FormControl-radio-labelWrap .FormControl-label",
102
+ ":is(:is(input.FormControl-radio[type=radio][disabled]:checked,input.FormControl-radio[type=radio]:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label",
144
103
  "input.FormControl-radio[type=radio]:focus-visible"
145
104
  ]
146
105
  }
data/app/components/primer/alpha/text_field.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n box-shadow: var(--shadow-inset);\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n box-shadow: none;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid='true'] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid='false'] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n\n &[data-multiple] {\n &::after {\n content: none;\n }\n\n & .FormControl-select {\n padding-right: var(--base-size-8);\n }\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
1
+ {"version":3,"sources":["text_field.pcss","../../../../lib/postcss_mixins/focusBoxShadowInset.pcss","<no source>","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"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","file":"text_field.css","sourcesContent":["/* FormControl */\n\n/* groups label, field, caption and inline error message */\n.FormControl {\n display: inline-flex;\n flex-direction: column;\n gap: var(--base-size-4);\n}\n\n/* fill container */\n.FormControl--fullWidth {\n display: flex;\n}\n\n/* <label> */\n.FormControl-label {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n line-height: var(--text-body-lineHeight-medium);\n color: var(--fgColor-default);\n}\n\n/* optional caption */\n.FormControl-caption {\n margin-bottom: 0;\n font-size: var(--text-caption-size);\n font-weight: var(--text-caption-weight);\n line-height: var(--text-caption-lineHeight);\n color: var(--fgColor-muted);\n}\n\n/* inline validation message */\n.FormControl-inlineValidation {\n display: flex;\n font-size: var(--text-caption-size);\n line-height: var(--text-caption-lineHeight);\n font-weight: var(--base-text-weight-semibold);\n color: var(--control-borderColor-danger);\n fill: var(--control-borderColor-danger);\n flex-direction: row;\n align-items: flex-start;\n gap: var(--base-size-4);\n\n & p {\n margin-bottom: 0;\n }\n}\n\n.FormControl-inlineValidation--success {\n color: var(--control-borderColor-success);\n fill: var(--control-borderColor-success);\n}\n\n.FormControl-inlineValidation--visual {\n align-items: center;\n display: flex;\n min-height: var(--base-size-16);\n}\n\n.FormControl-spacingWrapper {\n display: flex;\n flex-direction: column;\n row-gap: 0.5rem;\n}\n\n.FormControl-horizontalGroup {\n display: flex;\n column-gap: 0.5rem;\n}\n\n/* shared among all form control components (input, select, textarea, checkbox, radio) */\n@define-mixin Field {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));\n box-shadow: var(--shadow-inset);\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n background-color: var(--control-bgColor-disabled);\n border-color: var(--control-borderColor-disabled);\n opacity: 1;\n box-shadow: none;\n -webkit-text-fill-color: var(--control-fgColor-disabled);\n }\n\n &:not(:focus)[invalid='true'] {\n border-color: var(--control-borderColor-danger);\n }\n\n &:not(:focus)[invalid='false'] {\n border-color: var(--control-borderColor-success);\n }\n\n &:not([type='checkbox'], [type='radio']):focus {\n @mixin focusBoxShadowInset;\n\n /* remove fallback :focus if :focus-visible is supported */\n &:not(:focus-visible) {\n border-color: transparent;\n\n @mixin focusBoxShadowInset 1px transparent;\n }\n }\n\n /* default focus state */\n &:not([type='checkbox'], [type='radio']):focus-visible {\n @mixin focusBoxShadowInset;\n }\n}\n\n/* TextInput structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-input-wrap\n** │ │ ├─ .FormControl-input-leadingVisualWrap\n** │ │ │ ├─ .FormControl-input-leadingVisual\n** │ │ ├─ .FormControl-input\n** │ │ ├─ .FormControl-input-trailingAction\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Select structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** │ ├─ .FormControl-select-wrap\n** │ │ ├─ .FormControl-select\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n/* // Textarea structure\n** ===================\n**\n** .FormControl\n** ├─ .FormControl-label\n** ├─ .FormControl-textarea\n** ├─ .FormControl-inlineValidation\n** ├─ .FormControl-caption */\n\n.FormControl-input,\n.FormControl-select,\n.FormControl-textarea {\n @mixin Field;\n\n width: 100%;\n font-size: var(--text-body-size-medium);\n line-height: var(--text-body-lineHeight-medium);\n border-radius: var(--borderRadius-medium);\n transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);\n transition-property: color, background-color, box-shadow, border-color;\n padding-inline: var(--control-medium-paddingInline-condensed);\n padding-block: calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));\n\n &[disabled] {\n &::placeholder {\n color: var(--control-fgColor-disabled);\n }\n }\n\n &[readonly] {\n background-color: var(--control-bgColor-disabled);\n }\n\n &::placeholder {\n color: var(--control-fgColor-placeholder);\n opacity: 1;\n }\n\n /* sizes */\n\n &.FormControl-small {\n height: var(--control-small-size);\n padding-inline: var(--control-small-paddingInline-normal);\n padding-block: var(--control-small-paddingBlock);\n font-size: var(--text-body-size-small);\n }\n\n &.FormControl-medium {\n height: var(--control-medium-size);\n }\n\n &.FormControl-large {\n height: var(--control-large-size);\n padding-inline: var(--control-large-paddingInline-normal);\n padding-block: var(--control-large-paddingBlock);\n }\n\n /* variants */\n\n &.FormControl-inset {\n background-color: var(--bgColor-muted);\n\n &:focus-visible,\n &:focus {\n background-color: var(--bgColor-default);\n }\n }\n\n &.FormControl-monospace {\n font-family: var(--fontStack-monospace);\n }\n\n /* validation states */\n\n &.FormControl-error {\n border-color: var(--control-borderColor-danger);\n }\n\n &.FormControl-success {\n border-color: var(--control-borderColor-success);\n }\n\n &.FormControl-warning {\n border-color: var(--control-borderColor-warning);\n }\n}\n\n.FormControl-toggleSwitchInput {\n display: flex;\n align-items: flex-start;\n gap: var(--base-size-16);\n}\n\n/* positioning for leading/trailing items for TextInput */\n.FormControl-input-wrap {\n position: relative;\n display: grid;\n\n & .FormControl-input-leadingVisualWrap {\n position: absolute;\n top: var(--base-size-8);\n left: var(--base-size-8);\n display: block;\n width: var(--base-size-16);\n height: var(--base-size-16);\n color: var(--fgColor-muted);\n pointer-events: none;\n\n /* octicon */\n & .FormControl-input-leadingVisual {\n display: block;\n user-select: none;\n }\n }\n\n /* TODO: replace with new Button component */\n & .FormControl-input-trailingAction {\n position: absolute;\n top: var(--base-size-4);\n right: var(--base-size-4);\n z-index: 4;\n display: grid;\n width: var(--control-xsmall-size);\n height: var(--control-xsmall-size);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n background: transparent;\n border: 0;\n border-radius: var(--borderRadius-small);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n align-items: center;\n justify-content: center;\n\n & svg {\n user-select: none;\n }\n\n &[disabled] {\n color: var(--control-fgColor-disabled);\n pointer-events: none;\n }\n\n &:hover {\n background: var(--control-transparent-bgColor-hover);\n }\n\n &:active {\n background: var(--control-transparent-bgColor-active);\n }\n\n /* show vertical divider line between field and button */\n &.FormControl-input-trailingAction--divider {\n &::before {\n position: absolute;\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);\n left: calc(var(--base-size-4) * -1);\n display: block;\n width: var(--borderWidth-thin);\n height: var(--base-size-16);\n content: '';\n background: var(--borderColor-default);\n }\n }\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n\n @media (pointer: coarse) {\n min-width: var(--control-minTarget-coarse);\n min-height: var(--control-minTarget-coarse);\n }\n }\n }\n\n /* if leadingVisual is present */\n\n /*\n\t┌──32px──┬────────────────────┐\n\t╎ ┌───┐ ┌────────────────┐ ╎\n\t╎ 16px 16px ╎\n\t╎ └───┘ └────────────────┘ ╎\n\t└───────8px───────────────────┘\n\t*/\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input {\n padding-inline-start: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n }\n\n /*\n\t┌──────────────────┬──32px──┐\n\t╎ ┌──────────────┐ ┌────┐ ╎\n\t╎ 24px 24px ╎\n\t╎ └──────────────┘ └────┘ ╎\n\t└──────────────────┴────────┘\n */\n\n /* if trailingAction is present */\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)\n ); /* 32px */\n }\n\n /*\n\t\t32px + 1px border\n\t\t┌──────────────────┬──33px──┐\n\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t╎ 24px 24px ╎\n\t\t╎ └──────────────┘ └────┘ ╎\n\t\t└──────────────────┴────────┘\n\t\t*/\n\n /* if trailingAction divider is present, add 1px padding to accomodate input field text\n ** can be refactored to has(.FormControl-input-trailingAction--divider) */\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input {\n padding-inline-end: calc(\n var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +\n var(--borderWidth-thin)\n ); /* 33px */\n }\n }\n }\n\n /* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)\n // sizes */\n &.FormControl-input-wrap--small {\n & .FormControl-input-leadingVisualWrap {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n left: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n }\n\n /*\n ┌──────────────────┬──28px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 20px 20px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)\n ); /* 28px */\n }\n\n /*\n\t\t\t28px + 1px border\n\t\t\t┌──────────────────┬──29px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 20px 20px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-small {\n padding-inline-end: calc(\n var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +\n var(--borderWidth-thin)\n ); /* 29px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n width: calc(var(--control-small-size) - var(--base-size-8));\n height: calc(var(--control-small-size) - var(--base-size-8));\n\n &::before {\n top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */\n }\n }\n }\n\n &.FormControl-input-wrap--large {\n & .FormControl-input-leadingVisualWrap {\n top: var(--control-medium-paddingInline-normal);\n left: var(--control-medium-paddingInline-normal);\n }\n\n /*\n ┌──36px──┬───12px padding──────┐\n ╎ ┌───┐ ┌────────────────┐ ╎\n ╎ 16px 16px ╎\n ╎ └───┘ └────────────────┘ ╎\n └12px───8px───────────────────┘\n */\n\n &.FormControl-input-wrap--leadingVisual {\n & .FormControl-input.FormControl-large {\n padding-inline-start: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n }\n\n /*\n ┌──────────────────┬──36px──┐\n ╎ ┌──────────────┐ ┌────┐ ╎\n ╎ 28px 28px ╎\n ╎ └──────────────┘ └────┘ ╎\n └──────────────────┴────────┘\n */\n\n &.FormControl-input-wrap--trailingAction {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)\n ); /* 36px */\n }\n\n /*\n\t\t\t┌──────────────────┬──37px──┐\n\t\t\t╎ ┌──────────────┐ ┌────┐ ╎\n\t\t\t╎ 28px 28px ╎\n\t\t\t╎ └──────────────┘ └────┘ ╎\n\t\t\t└──────────────────┴────────┘\n\t\t\t*/\n\n &.FormControl-input-wrap-trailingAction--divider {\n & .FormControl-input.FormControl-large {\n padding-inline-end: calc(\n var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +\n var(--borderWidth-thin)\n ); /* 37px */\n }\n }\n }\n\n & .FormControl-input-trailingAction {\n top: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n right: calc(var(--control-medium-paddingInline-condensed) - 0.125rem); /* 6px */\n width: var(--control-small-size);\n height: var(--control-small-size);\n\n &::before {\n top: unset;\n height: var(--base-size-20);\n }\n }\n }\n}\n\n.FormControl-select-wrap {\n display: grid;\n grid-template-columns: minmax(0, auto) var(--base-size-16);\n\n /* mask allows for background-color to respect themes */\n &::after {\n width: var(--base-size-16);\n height: var(--base-size-16);\n padding-right: var(--base-size-4);\n pointer-events: none;\n content: '';\n background-color: var(--bgColor-neutral-emphasis);\n mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');\n mask-size: contain;\n mask-repeat: no-repeat;\n grid-column: 2;\n grid-row: 1;\n place-self: center end;\n }\n\n /* spans entire grid below mask */\n & .FormControl-select {\n grid-column: 1/-1;\n grid-row: 1;\n appearance: none;\n padding-right: var(--base-size-20);\n }\n\n &[data-multiple] {\n &::after {\n content: none;\n }\n\n & .FormControl-select {\n padding-right: var(--base-size-8);\n }\n }\n}\n\n/* checkbox + radio specific styles */\n\n/* // Checkbox + Radio structure\n** ===================\n**\n** .FormControl-radio-wrap\n** ├─ .FormControl-radio\n** ├─ .FormControl-radio-labelWrap\n** │ ├─ .FormControl-label\n** │ ├─ .FormControl-caption */\n\n.FormControl-checkbox-wrap,\n.FormControl-radio-wrap {\n display: inline-grid;\n grid-template-columns: min-content auto;\n gap: var(--base-size-8);\n\n & .FormControl-checkbox-labelWrap,\n & .FormControl-radio-labelWrap {\n display: flex;\n flex-direction: column;\n gap: var(--base-size-4);\n }\n\n & .FormControl-label {\n cursor: pointer;\n }\n}\n\n.FormControl-radio-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n.FormControl-check-group-wrap {\n & fieldset {\n padding: 0;\n margin: 0;\n border: 0;\n }\n}\n\n/* these selectors are temporary to override base.scss\n** once Field styles are widely adopted, we can adjust this and the global base styles */\ninput[type='checkbox'].FormControl-checkbox {\n @mixin Field;\n\n position: relative;\n display: grid;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-small);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n place-content: center;\n\n &::before {\n width: var(--base-size-16);\n height: var(--base-size-16);\n visibility: hidden;\n content: '';\n background-color: var(--control-checked-fgColor-rest);\n transition: visibility 0s linear 230ms;\n clip-path: inset(var(--base-size-16) 0 0 0);\n\n /* octicon checkmark image */\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */\n }\n }\n\n /* extend touch target */\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-checkbox-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n background: var(--control-checked-bgColor-rest, var(--color-accent-fg));\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n transition: background-color, border-color 80ms cubic-bezier(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */\n\n &::before {\n visibility: visible;\n transition: visibility 0s linear 0s;\n\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n background-color: var(--control-fgColor-disabled);\n border-color: var(--control-fgColor-disabled);\n opacity: 1;\n\n &::before {\n background-color: var(--control-checked-fgColor-rest);\n }\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n &:indeterminate {\n &::before {\n mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');\n visibility: visible;\n }\n }\n}\n\ninput[type='radio'].FormControl-radio {\n @mixin Field;\n\n position: relative;\n width: var(--base-size-16);\n height: var(--base-size-16);\n margin: 0;\n margin-top: 0.125rem; /* 2px to center align with label (20px line-height) */\n cursor: pointer;\n border-color: var(--control-borderColor-emphasis);\n border-radius: var(--borderRadius-full);\n transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */\n appearance: none;\n\n &::after {\n @mixin minTouchTarget var(--control-medium-size) var(--control-medium-size);\n }\n\n &[disabled] {\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n\n &:checked {\n border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));\n border-width: var(--base-size-4);\n\n &[disabled], &:disabled {\n cursor: not-allowed;\n border-color: var(--control-fgColor-disabled);\n\n & ~ .FormControl-radio-labelWrap {\n & .FormControl-label {\n color: var(--control-fgColor-disabled);\n cursor: not-allowed;\n }\n }\n }\n }\n\n &:focus-visible {\n @mixin focusOutline 2px;\n }\n\n /* Windows High Contrast mode */\n @media (forced-colors: active) {\n background-color: canvastext;\n border-color: canvastext;\n }\n}\n\n@keyframes checkmarkIn {\n from {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n\n to {\n clip-path: inset(0 0 0 0);\n }\n}\n\n@keyframes checkmarkOut {\n from {\n clip-path: inset(0 0 0 0);\n }\n\n to {\n clip-path: inset(var(--base-size-16) 0 0 0);\n }\n}\n","/* inset box-shadow for form controls */\n@define-mixin focusBoxShadowInset $outlineWidth: 1px, $outlineColor: var(--focus-outlineColor) {\n border-color: var(--focus-outlineColor);\n outline: none;\n box-shadow: inset 0 0 0 $outlineWidth $outlineColor;\n}\n",null,"@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--focus-outlineColor) {\n outline: 2px solid $outlineColor;\n outline-offset: $outlineOffset;\n box-shadow: none;\n}\n"]}
data/app/components/primer/alpha/toggle_switch.css CHANGED
@@ -1 +1 @@
1
- .ToggleSwitch,.ToggleSwitch.ToggleSwitch{display:inline-flex}.ToggleSwitch{align-items:center;gap:var(--controlStack-medium-gap-condensed)}.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(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);cursor:pointer;display:block;height:var(--control-medium-size);overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;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)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@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(--controlTrack-bgColor-disabled);border-color:#0000;color:var(--control-checked-fgColor-disabled)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);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(--controlTrack-bgColor-disabled);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:var(--borderRadius-medium);bottom:0;box-shadow:var(--shadow-resting-medium),var(--button-default-shadow-inset);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(--fgColor-default);font-size:var(--text-body-size-medium);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size);width:var(--base-size-48)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-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)}.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(--controlTrack-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);border-radius:var(--borderRadius-medium);cursor:pointer;display:block;height:var(--control-medium-size);overflow:hidden;padding:0;position:relative;-webkit-text-decoration:none;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)}.ToggleSwitch-track:focus,.ToggleSwitch-track:focus-visible{outline-offset:1px}.ToggleSwitch-track:hover{background-color:var(--controlTrack-bgColor-hover)}.ToggleSwitch-track:active{background-color:var(--controlTrack-bgColor-active)}@media (pointer:coarse){:is(.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(--controlTrack-bgColor-disabled);border-color:#0000;color:var(--control-checked-fgColor-disabled)}.ToggleSwitch-track[aria-pressed=true]{background-color:var(--control-checked-bgColor-rest);border-color:var(--borderColor-transparent)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):hover{background-color:var(--control-checked-bgColor-hover)}.ToggleSwitch-track[aria-pressed=true]:not([disabled]):active{background-color:var(--control-checked-bgColor-active)}.ToggleSwitch-track[aria-pressed=true] .ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-checked);border-color:var(--controlKnob-borderColor-checked);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(--controlTrack-bgColor-disabled);border-color:#0000;cursor:not-allowed;transition-property:none}.ToggleSwitch-track[disabled] .ToggleSwitch-knob{border-color:var(--borderColor-default);box-shadow:none}.ToggleSwitch-track[disabled] .ToggleSwitch-circleIcon,.ToggleSwitch-track[disabled] .ToggleSwitch-lineIcon{color:var(--controlTrack-fgColor-disabled)}.ToggleSwitch-icons{align-items:center;display:flex;height:100%;overflow:hidden;width:100%}.ToggleSwitch-lineIcon{color:var(--control-checked-fgColor-rest);transform:translateX(-100%)}.ToggleSwitch-circleIcon,.ToggleSwitch-lineIcon{flex:1 0 50%;line-height:0;transition-duration:80ms;transition-property:transform}.ToggleSwitch-circleIcon{color:var(--controlTrack-fgColor-rest);transform:translateX(0)}.ToggleSwitch-knob{background-color:var(--controlKnob-bgColor-rest);border:var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);border-radius:var(--borderRadius-medium);bottom:0;box-shadow:var(--shadow-resting-medium),var(--button-default-shadow-inset);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(--fgColor-default);font-size:var(--text-body-size-medium);line-height:1.5;position:relative;text-align:right}.ToggleSwitch-statusIcon{display:flex;margin-top:.063rem;width:var(--base-size-16)}.ToggleSwitch--small .ToggleSwitch-status{font-size:var(--text-body-size-small)}.ToggleSwitch--small .ToggleSwitch-track{height:var(--control-xsmall-size);width:var(--base-size-48)}.ToggleSwitch--disabled .ToggleSwitch-status{color:var(--fgColor-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}
data/app/components/primer/alpha/toggle_switch.css.json CHANGED
@@ -10,7 +10,7 @@
10
10
  ".ToggleSwitch-track:focus-visible",
11
11
  ".ToggleSwitch-track:hover",
12
12
  ".ToggleSwitch-track:active",
13
- ".ToggleSwitch-track:before",
13
+ ":is(.ToggleSwitch-track:before)",
14
14
  ".ToggleSwitch-track *",
15
15
  ".ToggleSwitch-track[aria-pressed=true][disabled]",
16
16
  ".ToggleSwitch-track[aria-pressed=true]",
data/app/components/primer/alpha/toggle_switch.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["toggle_switch.pcss","<no source>"],"names":[],"mappings":"AAQA,yCAHE,mBAOF,CAJA,cACE,kBAAmB,CAEnB,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,iCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,4BAAqB,CAArB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,yBAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,2BC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,qDAAsD,CAEtD,kBAAyB,CADzB,6CAEF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,qDAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,uCAAwC,CACxC,eACF,CAMA,4GACE,0CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,yCAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,sCAAuC,CAGvC,uBAEF,CAEA,mBAME,gDAAiD,CACjD,wEAAyE,CACzE,wCAAyC,CALzC,QAAS,CAMT,0EAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,4BAA6B,CAF7B,sCAAuC,CACvC,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,yBAGF,CAGE,0CACE,qCACF,CAEA,yCAEE,iCAAkC,CADlC,yBAEF,CAIA,6CACE,0BACF,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(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\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(--controlTrack-bgColor-hover);\n }\n\n &:active {\n background-color: var(--controlTrack-bgColor-active);\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(--controlTrack-bgColor-disabled);\n color: var(--control-checked-fgColor-disabled);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--control-checked-bgColor-rest);\n border-color: var(--borderColor-transparent);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--control-checked-bgColor-hover);\n }\n\n &:active {\n background-color: var(--control-checked-bgColor-active);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--controlKnob-bgColor-checked);\n border-color: var(--controlKnob-borderColor-checked);\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(--controlTrack-bgColor-disabled);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--borderColor-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--controlTrack-fgColor-disabled);\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(--control-checked-fgColor-rest);\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(--controlTrack-fgColor-rest);\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(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\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(--fgColor-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(--fgColor-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,4CACF,CAGE,8CACE,WAAY,CACZ,kBACF,CAEA,+CACE,QAAS,CACT,iBACF,CAGF,oBAgBE,uBAAgB,CAAhB,eAAgB,CANhB,iDAAkD,CAClD,yEAA0E,CAC1E,wCAAyC,CAJzC,cAAe,CANf,aAAc,CAEd,iCAAkC,CAElC,eAAgB,CADhB,SAAU,CAJV,iBAAkB,CAMlB,4BAAqB,CAArB,oBAAqB,CAOrB,wBAAyB,CACzB,iDAAmD,CAFnD,mDAAyD,CAJzD,wBAAiB,CAAjB,gBAAiB,CANjB,yBAyCF,CA1BE,4DAEE,kBACF,CAEA,0BACE,kDACF,CAEA,2BACE,mDACF,CAEA,wBAEI,gCC3DN,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UD2DgC,CAE9B,CAEA,gCAGE,0CACE,eACF,CACF,CAGF,iDACE,qDAAsD,CAEtD,kBAAyB,CADzB,6CAEF,CAEA,uCACE,oDAAqD,CACrD,2CAyBF,CAtBI,6DACE,qDACF,CAEA,8DACE,sDACF,CAGF,0DACE,mDAAoD,CACpD,mDAAoD,CACpD,0BACF,CAEA,8DACE,uBACF,CAEA,gEACE,0BACF,CAGF,8BAEE,qDAAsD,CACtD,kBAAyB,CAFzB,kBAAmB,CAGnB,wBAcF,CAZE,iDACE,uCAAwC,CACxC,eACF,CAMA,4GACE,0CACF,CAGF,oBAEE,kBAAmB,CADnB,YAAa,CAGb,WAAY,CACZ,eAAgB,CAFhB,UAGF,CAEA,uBAEE,yCAA0C,CAG1C,2BAEF,CAEA,gDAHE,YAAa,CALb,aAAc,CAEd,wBAAyB,CACzB,6BAYF,CAPA,yBAEE,sCAAuC,CAGvC,uBAEF,CAEA,mBAME,gDAAiD,CACjD,wEAAyE,CACzE,wCAAyC,CALzC,QAAS,CAMT,0EAA4E,CAR5E,iBAAkB,CAClB,KAAM,CASN,wBAAyB,CACzB,6BAA8B,CAF9B,mDAAyD,CALzD,SAAU,CADV,SAaF,CAHE,gCAdF,mBAeI,eAEJ,CADE,CAGF,qBAIE,4BAA6B,CAF7B,sCAAuC,CACvC,eAAgB,CAFhB,iBAAkB,CAIlB,gBACF,CAEA,yBAEE,YAAa,CACb,kBAAoB,CAFpB,yBAGF,CAGE,0CACE,qCACF,CAEA,yCAEE,iCAAkC,CADlC,yBAEF,CAIA,6CACE,0BACF,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(--controlTrack-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);\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(--controlTrack-bgColor-hover);\n }\n\n &:active {\n background-color: var(--controlTrack-bgColor-active);\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(--controlTrack-bgColor-disabled);\n color: var(--control-checked-fgColor-disabled);\n border-color: transparent;\n}\n\n.ToggleSwitch-track[aria-pressed='true'] {\n background-color: var(--control-checked-bgColor-rest);\n border-color: var(--borderColor-transparent);\n\n &:not([disabled]) {\n &:hover {\n background-color: var(--control-checked-bgColor-hover);\n }\n\n &:active {\n background-color: var(--control-checked-bgColor-active);\n }\n }\n\n & .ToggleSwitch-knob {\n background-color: var(--controlKnob-bgColor-checked);\n border-color: var(--controlKnob-borderColor-checked);\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(--controlTrack-bgColor-disabled);\n border-color: transparent;\n transition-property: none;\n\n & .ToggleSwitch-knob {\n border-color: var(--borderColor-default);\n box-shadow: none;\n }\n\n & .ToggleSwitch-lineIcon {\n color: var(--controlTrack-fgColor-disabled);\n }\n\n & .ToggleSwitch-circleIcon {\n color: var(--controlTrack-fgColor-disabled);\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(--control-checked-fgColor-rest);\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(--controlTrack-fgColor-rest);\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(--controlKnob-bgColor-rest);\n border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);\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(--fgColor-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(--fgColor-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]}
data/app/components/primer/alpha/toggle_switch.rb CHANGED
@@ -84,8 +84,9 @@ module Primer
84
84
 
85
85
  @system_arguments[:data] = merge_data(
86
86
  @system_arguments,
87
- { data: { csrf: @csrf_token, turbo: @turbo } }
87
+ { data: { csrf: @csrf_token } }
88
88
  )
89
+ @system_arguments[:data][:turbo] = true if @turbo
89
90
  end
90
91
  end
91
92
  end
data/app/components/primer/alpha/underline_nav.css CHANGED
@@ -1 +1 @@
1
- .UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;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);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(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;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(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);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)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
1
+ .UnderlineNav{box-shadow:inset 0 -1px 0 var(--borderColor-muted);display:flex;min-height:var(--base-size-48);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:auto;justify-content:space-between}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default);margin-left:var(--control-medium-gap)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium);color:var(--fgColor-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted);color:var(--fgColor-default);outline-offset:-2px;-webkit-text-decoration:none;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);height:0;visibility:hidden}:is(.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(--control-transparent-bgColor-hover);color:var(--fgColor-default);-webkit-text-decoration:none;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(--underlineNav-borderColor-active);color:var(--fgColor-default);font-weight:var(--base-text-weight-semibold)}:is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after{background:var(--underlineNav-borderColor-active);border-radius:var(--borderRadius-medium);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)}.UnderlineNav-octicon{color:var(--fgColor-muted);display:inline!important;margin-right:var(--control-medium-gap);fill:var(--fgColor-muted)}.UnderlineNav-container{display:flex;justify-content:space-between}
data/app/components/primer/alpha/underline_nav.css.json CHANGED
@@ -10,13 +10,11 @@
10
10
  ".UnderlineNav-item:focus-visible",
11
11
  ".UnderlineNav-item:hover",
12
12
  ".UnderlineNav-item [data-content]:before",
13
- ".UnderlineNav-item:before",
13
+ ":is(.UnderlineNav-item:before)",
14
14
  ".UnderlineNav-item.selected",
15
15
  ".UnderlineNav-item[aria-current]:not([aria-current=false])",
16
16
  ".UnderlineNav-item[role=tab][aria-selected=true]",
17
- ".UnderlineNav-item.selected:after",
18
- ".UnderlineNav-item[aria-current]:not([aria-current=false]):after",
19
- ".UnderlineNav-item[role=tab][aria-selected=true]:after",
17
+ ":is(.UnderlineNav-item.selected,.UnderlineNav-item[role=tab][aria-selected=true],.UnderlineNav-item[aria-current]:not([aria-current=false])):after",
20
18
  ".UnderlineNav--right",
21
19
  ".UnderlineNav--right .UnderlineNav-actions",
22
20
  ".UnderlineNav-actions",
data/app/components/primer/alpha/underline_nav.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAKE,kDAAmD,CAJnD,YAAa,CACb,8BAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAElB,+BAAgC,CAChC,6BAYF,CAVE,uBAGE,wEAA0E,CAD1E,4BAA6B,CAD7B,qCAGF,CAEA,gCAEE,gDAAiD,CADjD,+BAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,6BAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,wCAAyC,CANzC,4BAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,sCAAuC,CACvC,gBAAiB,CAFjB,uDAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,oDAAqD,CAFrD,4BAA6B,CAG7B,mBAAoB,CAFpB,4BAAqB,CAArB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,mDAAoD,CAFpD,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,0DAA2D,CAD3D,4BAA6B,CAD7B,4CAiBF,CAZE,0JAQE,iDAAkD,CAClD,wCAAyC,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,8BACF,CAGF,sBAGE,0BAA2B,CAF3B,wBAA0B,CAC1B,sCAAuC,CAEvC,yBACF,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(--borderColor-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap);\n color: var(--fgColor-default);\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n }\n\n & .Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-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(--fgColor-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(--fgColor-default);\n text-decoration: none;\n border-bottom-color: var(--borderColor-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(--fgColor-default);\n text-decoration: none;\n background: var(--control-transparent-bgColor-hover);\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(--fgColor-default);\n border-bottom-color: var(--underlineNav-borderColor-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(--underlineNav-borderColor-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(--fgColor-muted);\n fill: var(--fgColor-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,cAKE,kDAAmD,CAJnD,YAAa,CACb,8BAA+B,CAC/B,eAAgB,CAChB,iBAAkB,CAElB,+BAAgC,CAChC,6BAYF,CAVE,uBAGE,wEAA0E,CAD1E,4BAA6B,CAD7B,qCAGF,CAEA,gCAEE,gDAAiD,CADjD,+BAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,6BAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,wCAAyC,CANzC,4BAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,sCAAuC,CACvC,gBAAiB,CAFjB,uDAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,oDAAqD,CAFrD,4BAA6B,CAG7B,mBAAoB,CAFpB,4BAAqB,CAArB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,4CAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,+BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,mDAAoD,CAFpD,4BAA6B,CAC7B,4BAAqB,CAArB,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,0DAA2D,CAD3D,4BAA6B,CAD7B,4CAiBF,CAZE,mJAQE,iDAAkD,CAClD,wCAAyC,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,8BACF,CAGF,sBAGE,0BAA2B,CAF3B,wBAA0B,CAC1B,sCAAuC,CAEvC,yBACF,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(--borderColor-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap);\n color: var(--fgColor-default);\n background-color: var(--bgColor-neutral-muted, var(--color-neutral-muted));\n }\n\n & .Counter--primary {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-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(--fgColor-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(--fgColor-default);\n text-decoration: none;\n border-bottom-color: var(--borderColor-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(--fgColor-default);\n text-decoration: none;\n background: var(--control-transparent-bgColor-hover);\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(--fgColor-default);\n border-bottom-color: var(--underlineNav-borderColor-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(--underlineNav-borderColor-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(--fgColor-muted);\n fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
data/app/components/primer/beta/avatar_stack.css CHANGED
@@ -1 +1 @@
1
- .AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}
1
+ .AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{border-right:0;z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:3px;margin-right:0}:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}