primer_view_components 0.19.0 → 0.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (91) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +26 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_list.d.ts +16 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +3 -0
  5. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  6. data/app/assets/javascripts/primer_view_components.js +1 -1
  7. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  8. data/app/assets/styles/primer_view_components.css +1 -1
  9. data/app/assets/styles/primer_view_components.css.map +1 -1
  10. data/app/components/primer/alpha/action_list/item.rb +19 -6
  11. data/app/components/primer/alpha/action_list.css +1 -1
  12. data/app/components/primer/alpha/action_list.css.json +2 -0
  13. data/app/components/primer/alpha/action_list.css.map +1 -1
  14. data/app/components/primer/alpha/action_list.d.ts +16 -0
  15. data/app/components/primer/alpha/action_list.html.erb +19 -17
  16. data/app/components/primer/alpha/action_list.js +69 -0
  17. data/app/components/primer/alpha/action_list.pcss +8 -0
  18. data/app/components/primer/alpha/action_list.ts +58 -0
  19. data/app/components/primer/alpha/banner.css +1 -1
  20. data/app/components/primer/alpha/banner.css.map +1 -1
  21. data/app/components/primer/alpha/banner.pcss +4 -4
  22. data/app/components/primer/alpha/dialog.css +1 -1
  23. data/app/components/primer/alpha/dialog.css.json +2 -0
  24. data/app/components/primer/alpha/dialog.css.map +1 -1
  25. data/app/components/primer/alpha/dialog.pcss +9 -0
  26. data/app/components/primer/alpha/dropdown.css +1 -1
  27. data/app/components/primer/alpha/dropdown.css.map +1 -1
  28. data/app/components/primer/alpha/dropdown.pcss +1 -1
  29. data/app/components/primer/alpha/text_field.css +1 -1
  30. data/app/components/primer/alpha/text_field.css.json +2 -0
  31. data/app/components/primer/alpha/text_field.css.map +1 -1
  32. data/app/components/primer/alpha/text_field.pcss +10 -0
  33. data/app/components/primer/alpha/toggle_switch.rb +2 -2
  34. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +9 -9
  35. data/app/components/primer/beta/breadcrumbs.css +1 -1
  36. data/app/components/primer/beta/breadcrumbs.css.map +1 -1
  37. data/app/components/primer/beta/breadcrumbs.pcss +3 -1
  38. data/app/components/primer/beta/button.css +1 -1
  39. data/app/components/primer/beta/button.css.json +1 -0
  40. data/app/components/primer/beta/button.css.map +1 -1
  41. data/app/components/primer/beta/button.pcss +4 -0
  42. data/app/components/primer/beta/flash.css +1 -1
  43. data/app/components/primer/beta/flash.css.map +1 -1
  44. data/app/components/primer/beta/flash.pcss +4 -4
  45. data/app/components/primer/beta/nav_list.d.ts +3 -0
  46. data/app/components/primer/beta/nav_list.html.erb +1 -1
  47. data/app/components/primer/beta/nav_list.js +25 -2
  48. data/app/components/primer/beta/nav_list.ts +18 -1
  49. data/app/components/primer/beta/nav_list_group_element.js +4 -1
  50. data/app/components/primer/beta/nav_list_group_element.ts +3 -0
  51. data/app/components/primer/beta/popover.css +1 -1
  52. data/app/components/primer/beta/popover.css.map +1 -1
  53. data/app/components/primer/beta/popover.pcss +3 -0
  54. data/app/components/primer/beta/popover.rb +0 -1
  55. data/app/components/primer/primer.d.ts +1 -0
  56. data/app/components/primer/primer.js +1 -0
  57. data/app/components/primer/primer.ts +1 -0
  58. data/app/forms/auto_complete_form.rb +18 -0
  59. data/app/forms/select_form.rb +10 -0
  60. data/lib/primer/forms/auto_complete.html.erb +6 -0
  61. data/lib/primer/forms/auto_complete.rb +56 -0
  62. data/lib/primer/forms/builder.rb +19 -0
  63. data/lib/primer/forms/check_box_group.html.erb +4 -4
  64. data/lib/primer/forms/check_box_group.rb +0 -3
  65. data/lib/primer/forms/dsl/auto_complete_input.rb +33 -0
  66. data/lib/primer/forms/dsl/check_box_group_input.rb +8 -0
  67. data/lib/primer/forms/dsl/input.rb +8 -2
  68. data/lib/primer/forms/dsl/input_methods.rb +9 -0
  69. data/lib/primer/forms/dsl/radio_button_group_input.rb +8 -0
  70. data/lib/primer/forms/dsl/select_input.rb +5 -1
  71. data/lib/primer/forms/form_control.rb +1 -2
  72. data/lib/primer/forms/primer_text_field.js +2 -2
  73. data/lib/primer/forms/primer_text_field.ts +2 -2
  74. data/lib/primer/forms/radio_button_group.html.erb +4 -4
  75. data/lib/primer/forms/radio_button_group.rb +0 -3
  76. data/lib/primer/forms/select.html.erb +1 -0
  77. data/lib/primer/forms/select.rb +9 -5
  78. data/lib/primer/view_components/version.rb +1 -1
  79. data/previews/primer/alpha/action_list_preview.rb +42 -0
  80. data/previews/primer/alpha/select_preview.rb +12 -1
  81. data/previews/primer/alpha/text_area_preview.rb +7 -1
  82. data/previews/primer/alpha/text_field_preview.rb +7 -1
  83. data/previews/primer/beta/nav_list_preview.rb +43 -0
  84. data/previews/primer/forms_preview/auto_complete_form.html.erb +3 -0
  85. data/previews/primer/forms_preview/select_form.html.erb +1 -1
  86. data/previews/primer/forms_preview.rb +2 -0
  87. data/static/arguments.json +7 -7
  88. data/static/constants.json +15 -0
  89. data/static/info_arch.json +150 -7
  90. data/static/previews.json +143 -0
  91. metadata +11 -2
data/app/components/primer/alpha/dialog.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n.Overlay {\n display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n height: 100%;\n max-height: unset;\n position: fixed;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n height: 100%;\n max-height: 100vh;\n position: fixed;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
1
+ {"version":3,"sources":["dialog.pcss"],"names":[],"mappings":"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","file":"dialog.css","sourcesContent":["/* Overlay */\n\n/* TODO: One day this can be :has(:modal), when it is better supported */\nbody.has-modal {\n overflow: hidden !important;\n padding-right: var(--dialog-scrollgutter) !important;\n}\n\ndialog.Overlay:not([open]) {\n display: none;\n}\n\n.Overlay--hidden {\n display: none !important;\n}\n\n.Overlay--visibilityHidden {\n height: 0;\n overflow: hidden;\n visibility: hidden;\n opacity: 0;\n}\n\n/* hacks until firefox fully supports popovers */\n:where([popover]:not(.\\:popover-open)) {\n display: none !important;\n}\n\n:popover-open {\n display: inherit !important;\n}\n\n.Overlay {\n display: flex;\n inset: 0;\n position: static;\n margin: auto;\n padding: 0;\n width: min(var(--overlay-width), 100vw - 2rem);\n min-width: 192px;\n max-height: min(calc(100vh - 2rem), var(--overlay-height));\n white-space: normal;\n flex-direction: column;\n background-color: var(--overlay-bgColor);\n color: var(--fgColor-default);\n border: 0;\n border-radius: var(--borderRadius-large);\n box-shadow: var(--shadow-floating-small);\n opacity: 1;\n\n &.Overlay--size-auto {\n min-width: 192px;\n max-width: calc(100vw - 2rem);\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-full {\n width: 100vw;\n height: 100vh;\n }\n\n &.Overlay--size-xsmall {\n --overlay-width: 192px;\n\n max-height: calc(100vh - 2rem);\n }\n\n &.Overlay--size-small {\n --overlay-height: 256px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-small-portrait {\n --overlay-height: 432px;\n --overlay-width: 320px;\n }\n\n &.Overlay--size-medium {\n --overlay-height: 320px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-medium-portrait {\n --overlay-height: 600px;\n --overlay-width: 480px;\n }\n\n &.Overlay--size-large {\n --overlay-height: 432px;\n --overlay-width: 640px;\n }\n\n &.Overlay--size-xlarge {\n --overlay-height: 600px;\n --overlay-width: 960px;\n }\n\n &.Overlay--height-auto {\n height: auto;\n }\n\n &.Overlay--placement-left, &.Overlay--placement-right {\n height: 100%;\n max-height: unset;\n position: fixed;\n }\n\n &.Overlay--motion-scaleFade, &.Overlay--placement-left, &.Overlay--placement-right {\n @media screen and (prefers-reduced-motion: no-preference) {\n animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;\n }\n }\n\n &.Overlay--placement-left {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInRight;\n }\n\n &.Overlay--placement-right {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n /* start deprecate in favor of Alpha::Dialog */\n &.Overlay--height-xsmall {\n height: min(192px, 100vh - 2rem);\n }\n\n &.Overlay--height-small {\n height: min(256px, 100vh - 2rem);\n }\n\n &.Overlay--height-medium {\n height: min(320px, 100vh - 2rem);\n }\n\n &.Overlay--height-large {\n height: min(432px, 100vh - 2rem);\n }\n\n &.Overlay--height-xlarge {\n height: min(600px, 100vh - 2rem);\n }\n\n &.Overlay--width-auto {\n width: auto;\n }\n\n &.Overlay--width-small {\n width: min(256px, 100vw - 2rem);\n }\n\n &.Overlay--width-medium {\n width: min(320px, 100vw - 2rem);\n }\n\n &.Overlay--width-large {\n width: min(480px, 100vw - 2rem);\n }\n\n &.Overlay--width-xlarge {\n width: min(640px, 100vw - 2rem);\n }\n\n &.Overlay--width-xxlarge {\n width: min(960px, 100vw - 2rem);\n }\n\n /* end deprecate */\n}\n\n.Overlay:modal {\n position: fixed;\n}\n\n@keyframes Overlay--motion-scaleFade {\n 0% {\n opacity: 0;\n transform: scale(0.5);\n }\n\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}\n\n/* for <form> element that wraps entire contents of overlay */\n.Overlay-form {\n display: flex;\n overflow: auto;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.Overlay-header {\n z-index: 1;\n display: flex;\n flex-direction: column;\n color: var(--fgColor-default);\n\n &.Overlay-header--divided {\n padding-bottom: var(--stack-padding-condensed);\n box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);\n\n & + .Overlay-body {\n padding-top: var(--stack-padding-normal);\n }\n }\n\n &.Overlay-header--large {\n & .Overlay-headerContentWrap {\n & .Overlay-titleWrap {\n gap: var(--stack-gap-condensed);\n\n & .Overlay-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Overlay-description {\n font-size: var(--text-body-size-medium);\n }\n }\n }\n }\n\n & .Overlay-headerContentWrap {\n display: flex;\n align-items: flex-start;\n gap: var(--stack-gap-condensed);\n padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);\n\n & .Overlay-actionWrap {\n display: flex;\n flex-direction: row;\n gap: var(--stack-gap-condensed);\n }\n\n & .Overlay-titleWrap {\n display: flex;\n padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)\n var(--stack-gap-condensed);\n flex-direction: column;\n flex-grow: 1;\n gap: var(--control-small-gap);\n\n & .Overlay-title {\n margin: 0;\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n }\n\n & .Overlay-description {\n margin: 0;\n font-size: var(--text-body-size-small);\n font-weight: var(--base-text-weight-normal);\n color: var(--fgColor-muted);\n }\n }\n }\n}\n\n/* generic body content slot */\n.Overlay-body {\n padding: var(--stack-padding-normal);\n padding-top: 0;\n overflow-y: auto;\n scrollbar-width: thin;\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n\n &.Overlay-body--paddingCondensed {\n padding: var(--stack-padding-condensed);\n padding-top: 0;\n }\n\n &.Overlay-body--paddingNone {\n padding: 0;\n }\n}\n\n/* generic footer slot */\n.Overlay-footer {\n z-index: 1;\n display: flex;\n padding: 0 var(--stack-padding-normal) var(--stack-padding-normal) var(--stack-padding-normal);\n flex-direction: row;\n flex-shrink: 0;\n flex-wrap: wrap;\n\n &.Overlay-footer--divided {\n padding-top: var(--stack-padding-normal);\n box-shadow: inset 0 var(--borderWidth-thin) var(--borderColor-default);\n }\n\n &.Overlay-footer--alignStart {\n justify-content: flex-start;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignCenter {\n justify-content: center;\n gap: var(--stack-gap-condensed);\n }\n\n &.Overlay-footer--alignEnd {\n justify-content: flex-end;\n gap: var(--stack-gap-condensed);\n }\n}\n\n/* TODO: replace with refactored IconButton */\n.Overlay-closeButton {\n position: relative;\n display: grid;\n width: var(--base-size-32);\n height: var(--base-size-32);\n padding: 0;\n color: var(--fgColor-muted);\n cursor: pointer;\n user-select: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n transition-property: color, background-color, border-color;\n place-content: center;\n align-self: flex-start;\n flex-shrink: 0;\n\n &:hover,\n &:focus {\n background-color: var(--button-default-bgColor-hover);\n border: var(--borderWidth-thin) solid var(--control-bgColor-hover);\n }\n\n /* Override .close-button's `border: 0` that triggers a border-color transition on hover */\n &.close-button {\n border: var(--borderWidth-thin) solid transparent;\n }\n}\n\n/* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */\n\n/* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */\n\n/* full width */\n.Overlay--full {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n}\n\n/* responsive variants */\n\n/* --viewportRange-narrowLandscape */\n@media (max-width: 767px) {\n .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {\n height: 100%;\n max-height: 100vh;\n position: fixed;\n }\n\n .Overlay.Overlay--placement-left-whenNarrow {\n inset: 0 auto 0 0;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-right-whenNarrow {\n inset: 0 0 0 auto;\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideInLeft;\n }\n\n .Overlay.Overlay--placement-bottom-whenNarrow {\n width: 100%;\n max-width: 100vw;\n inset: auto 0 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n animation-name: Overlay--motion-slideUp;\n }\n\n .Overlay--full-whenNarrow {\n width: 100%;\n max-width: 100vw;\n height: 100%;\n max-height: 100vh;\n border-radius: unset !important;\n flex-grow: 1;\n }\n}\n\n@keyframes Overlay--motion-slideDown {\n from {\n transform: translateY(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideUp {\n from {\n transform: translateY(100%);\n }\n}\n\n@keyframes Overlay--motion-slideInRight {\n from {\n transform: translateX(-100%);\n }\n}\n\n@keyframes Overlay--motion-slideInLeft {\n from {\n transform: translateX(100%);\n }\n}\n"]}
data/app/components/primer/alpha/dialog.pcss CHANGED
@@ -21,6 +21,15 @@ dialog.Overlay:not([open]) {
21
21
  opacity: 0;
22
22
  }
23
23
 
24
+ /* hacks until firefox fully supports popovers */
25
+ :where([popover]:not(.\:popover-open)) {
26
+ display: none !important;
27
+ }
28
+
29
+ :popover-open {
30
+ display: inherit !important;
31
+ }
32
+
24
33
  .Overlay {
25
34
  display: flex;
26
35
  inset: 0;
data/app/components/primer/alpha/dropdown.css CHANGED
@@ -1 +1 @@
1
- .dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay))}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default,var(--color-border-default));bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
1
+ .dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-legacy,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay))}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));-webkit-text-decoration:none;text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-]{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor;color:inherit!important}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default,var(--color-border-default));bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
data/app/components/primer/alpha/dropdown.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,gDAAyC,CACzC,iEAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock);\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: 2px;\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-large);\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--borderColor-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--overlay-bgColor);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
1
+ {"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,gDAAyC,CACzC,kEAAoE,CAXpE,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,4BAAqB,CAArB,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAEA,wCACE,uBACF,CAEA,4BAEE,yBAA0B,CAD1B,uBAEF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock);\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: 2px;\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--borderColor-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--overlay-bgColor);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
data/app/components/primer/alpha/dropdown.pcss CHANGED
@@ -34,7 +34,7 @@
34
34
  background-clip: padding-box;
35
35
  border: var(--borderWidth-thin) solid var(--borderColor-default);
36
36
  border-radius: var(--borderRadius-medium);
37
- box-shadow: var(--shadow-floating-large);
37
+ box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
38
38
 
39
39
  &::before,
40
40
  &::after {
data/app/components/primer/alpha/text_field.css CHANGED
@@ -1 +1 @@
1
- .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.4285)}.FormControl-caption{color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.3333)}.FormControl-inlineValidation{color:var(--control-borderColor-danger,var(--color-danger-emphasis));display:flex;font-weight:var(--base-text-weight-semibold,600);fill:var(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;flex-direction:row;gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success,var(--color-success-emphasis));fill:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-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,var(--color-danger-emphasis))}.FormControl-input[invalid=false]:not(:focus),.FormControl-select[invalid=false]:not(:focus),.FormControl-textarea[invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,var(--color-fg-subtle));opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--bgColor-default,var(--color-canvas-default))}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,var(--color-attention-emphasis))}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted,var(--color-fg-muted));display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,.1875rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,var(--color-border-default));content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-small,.1875rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");visibility:visible}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-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,.25rem)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-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,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
1
+ .FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600);line-height:var(--text-body-lineHeight-medium,1.4285)}.FormControl-caption{color:var(--fgColor-muted,var(--color-fg-muted));font-weight:var(--text-caption-weight,400);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size,.75rem);line-height:var(--text-caption-lineHeight,1.3333)}.FormControl-inlineValidation{color:var(--control-borderColor-danger,var(--color-danger-emphasis));display:flex;font-weight:var(--base-text-weight-semibold,600);fill:var(--control-borderColor-danger,var(--color-danger-emphasis));align-items:flex-start;flex-direction:row;gap:var(--base-size-4,.25rem)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--control-borderColor-success,var(--color-success-emphasis));fill:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16,1rem)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:.5rem}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));font-size:var(--text-body-size-medium,.875rem);line-height:var(--text-body-lineHeight-medium,1.4285);padding-block:calc(var(--control-medium-paddingBlock, 6px) - var(--borderWidth-thin, 1px));padding-inline:var(--control-medium-paddingInline-condensed,.5rem);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}.FormControl-input[disabled],.FormControl-select[disabled],.FormControl-textarea[disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-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,var(--color-danger-emphasis))}.FormControl-input[invalid=false]:not(:focus),.FormControl-select[invalid=false]:not(:focus),.FormControl-textarea[invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input:not([type=checkbox],[type=radio]):focus,.FormControl-select:not([type=checkbox],[type=radio]):focus,.FormControl-textarea:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-select:not([type=checkbox],[type=radio]):focus:not(:focus-visible),.FormControl-textarea:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input:not([type=checkbox],[type=radio]):focus-visible,.FormControl-select:not([type=checkbox],[type=radio]):focus-visible,.FormControl-textarea:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.FormControl-input[disabled]::placeholder,.FormControl-select[disabled]::placeholder,.FormControl-textarea[disabled]::placeholder{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.FormControl-input[readonly],.FormControl-select[readonly],.FormControl-textarea[readonly]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg))}.FormControl-input::placeholder,.FormControl-select::placeholder,.FormControl-textarea::placeholder{color:var(--control-fgColor-placeholder,var(--color-fg-subtle));opacity:1}.FormControl-input.FormControl-small,.FormControl-select.FormControl-small,.FormControl-textarea.FormControl-small{font-size:var(--text-body-size-small,.75rem);height:var(--control-small-size,1.75rem);padding-block:var(--control-small-paddingBlock,.25rem);padding-inline:var(--control-small-paddingInline-normal,.75rem)}.FormControl-input.FormControl-medium,.FormControl-select.FormControl-medium,.FormControl-textarea.FormControl-medium{height:var(--control-medium-size,2rem)}.FormControl-input.FormControl-large,.FormControl-select.FormControl-large,.FormControl-textarea.FormControl-large{height:var(--control-large-size,2.5rem);padding-block:var(--control-large-paddingBlock,.625rem);padding-inline:var(--control-large-paddingInline-normal,.75rem)}.FormControl-input.FormControl-inset,.FormControl-select.FormControl-inset,.FormControl-textarea.FormControl-inset{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.FormControl-input.FormControl-inset:focus,.FormControl-input.FormControl-inset:focus-visible,.FormControl-select.FormControl-inset:focus,.FormControl-select.FormControl-inset:focus-visible,.FormControl-textarea.FormControl-inset:focus,.FormControl-textarea.FormControl-inset:focus-visible{background-color:var(--bgColor-default,var(--color-canvas-default))}.FormControl-input.FormControl-monospace,.FormControl-select.FormControl-monospace,.FormControl-textarea.FormControl-monospace{font-family:var(--fontStack-monospace,ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace)}.FormControl-input.FormControl-error,.FormControl-select.FormControl-error,.FormControl-textarea.FormControl-error{border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}.FormControl-input.FormControl-success,.FormControl-select.FormControl-success,.FormControl-textarea.FormControl-success{border-color:var(--control-borderColor-success,var(--color-success-emphasis))}.FormControl-input.FormControl-warning,.FormControl-select.FormControl-warning,.FormControl-textarea.FormControl-warning{border-color:var(--control-borderColor-warning,var(--color-attention-emphasis))}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16,1rem)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted,var(--color-fg-muted));display:block;height:var(--base-size-16,1rem);left:var(--base-size-8,.5rem);pointer-events:none;position:absolute;top:var(--base-size-8,.5rem);width:var(--base-size-16,1rem)}.FormControl-input-wrap .FormControl-input-leadingVisualWrap .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small,.1875rem);color:var(--fgColor-muted,var(--color-fg-muted));cursor:pointer;display:grid;height:var(--control-xsmall-size,1.5rem);justify-content:center;padding:0;position:absolute;right:var(--base-size-4,.25rem);top:var(--base-size-4,.25rem);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size,1.5rem);z-index:4}.FormControl-input-wrap .FormControl-input-trailingAction svg{-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingAction[disabled]{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));pointer-events:none}.FormControl-input-wrap .FormControl-input-trailingAction:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.FormControl-input-wrap .FormControl-input-trailingAction:active{background:var(--control-transparent-bgColor-active,var(--color-action-list-item-default-active-bg))}.FormControl-input-wrap .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before{background:var(--borderColor-default,var(--color-border-default));content:"";display:block;height:var(--base-size-16,1rem);left:calc(var(--base-size-4,.25rem)*-1);position:absolute;top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/2);width:var(--borderWidth-thin,max(1px,.0625rem))}.FormControl-input-wrap .FormControl-input-trailingAction:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){.FormControl-input-wrap .FormControl-input-trailingAction:after{min-height:var(--control-minTarget-coarse,2.75rem);min-width:var(--control-minTarget-coarse,2.75rem)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-medium-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem)}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed,.5rem) + var(--base-size-16,1rem) + var(--control-small-gap,.25rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem));width:calc(var(--control-small-size,1.75rem) - var(--base-size-8,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction:before{top:calc((var(--control-xsmall-size,1.5rem) - var(--base-size-16,1rem))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal,.75rem);top:var(--control-medium-paddingInline-normal,.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal,.75rem) + var(--base-size-16,1rem) + var(--control-large-gap,.5rem) + var(--borderWidth-thin,max(1px, .0625rem)))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size,1.75rem);right:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);top:calc(var(--control-medium-paddingInline-condensed,.5rem) - .125rem);width:var(--control-small-size,1.75rem)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction:before{height:var(--base-size-20,1.25rem);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16,1rem)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));content:"";grid-column:2;grid-row:1;height:var(--base-size-16,1rem);-webkit-mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSI+PHBhdGggZD0ibTQuNDI3IDkuNDI3IDMuMzk2IDMuMzk2YS4yNS4yNSAwIDAgMCAuMzU0IDBsMy4zOTYtMy4zOTZBLjI1LjI1IDAgMCAwIDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAgMC0uMTc3LjQyN000LjQyMyA2LjQ3IDcuODIgMy4wNzJhLjI1LjI1IDAgMCAxIC4zNTQgMEwxMS41NyA2LjQ3YS4yNS4yNSAwIDAgMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMCAxLS4xNzctLjQyNyIvPjwvc3ZnPg==");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;padding-right:var(--base-size-4,.25rem);place-self:center end;pointer-events:none;width:var(--base-size-16,1rem)}.FormControl-select-wrap .FormControl-select{-webkit-appearance:none;appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20,1.25rem)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8,.5rem)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8,.5rem);grid-template-columns:min-content auto}.FormControl-checkbox-wrap .FormControl-checkbox-labelWrap,.FormControl-checkbox-wrap .FormControl-radio-labelWrap,.FormControl-radio-wrap .FormControl-checkbox-labelWrap,.FormControl-radio-wrap .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4,.25rem)}.FormControl-checkbox-wrap .FormControl-label,.FormControl-radio-wrap .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}input[type=checkbox].FormControl-checkbox{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-small,.1875rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:grid;height:var(--base-size-16,1rem);margin:.125rem 0 0;place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-checkbox[type=checkbox][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-checkbox[type=checkbox][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-checkbox[type=checkbox][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-checkbox[type=checkbox]:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg));clip-path:inset(var(--base-size-16,1rem) 0 0 0);content:"";height:var(--base-size-16,1rem);-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43OC4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2MUw0LjUyIDguNTQxYS43NS43NSAwIDAgMS0xLjA2MiAwTC4yMDIgNS4yODVhLjc1Ljc1IDAgMCAxIDEuMDYxLTEuMDYxbDIuNzI1IDIuNzIzTDEwLjcxOC4yMmEuNzUuNzUgMCAwIDEgMS4wNjIgMCIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:75%;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16,1rem)}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards}}input.FormControl-checkbox[type=checkbox]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-checkbox[type=checkbox][disabled]~.FormControl-checkbox-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-checkbox[type=checkbox]:checked{background:var(--control-checked-bgColor-rest,var(--color-accent-fg));border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));transition:background-color,border-color 80ms cubic-bezier(.32,0,.67,0) 0ms}input.FormControl-checkbox[type=checkbox]:checked:before{transition:visibility 0s linear 0s;visibility:visible}@media screen and (prefers-reduced-motion:no-preference){input.FormControl-checkbox[type=checkbox]:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards}}input.FormControl-checkbox[type=checkbox]:checked:disabled{background-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));border-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1}input.FormControl-checkbox[type=checkbox]:checked:disabled:before{background-color:var(--control-checked-fgColor-rest,var(--color-switch-track-checked-fg))}@media (forced-colors:active){input.FormControl-checkbox[type=checkbox]:checked{background-color:canvastext;border-color:canvastext}}input.FormControl-checkbox[type=checkbox]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}input.FormControl-checkbox[type=checkbox]:indeterminate:before{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIj48cGF0aCBmaWxsPSIjZmZmIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wIDFhMSAxIDAgMCAxIDEtMWg4YTEgMSAwIDEgMSAwIDJIMWExIDEgMCAwIDEtMS0xIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");visibility:visible}input[type=radio].FormControl-radio{-webkit-appearance:none;appearance:none;background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--control-borderColor-rest,var(--color-border-default));border-color:var(--control-borderColor-emphasis,var(--color-switch-knob-border));border-radius:var(--borderRadius-full,624.9375rem);box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset));color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;height:var(--base-size-16,1rem);margin:.125rem 0 0;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16,1rem)}input.FormControl-radio[type=radio][disabled]{background-color:var(--control-bgColor-disabled,var(--color-input-disabled-bg));border-color:var(--control-borderColor-disabled,var(--color-btn-border));box-shadow:none;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}input.FormControl-radio[type=radio][invalid=true]:not(:focus){border-color:var(--control-borderColor-danger,var(--color-danger-emphasis))}input.FormControl-radio[type=radio][invalid=false]:not(:focus){border-color:var(--control-borderColor-success,var(--color-success-emphasis))}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}input.FormControl-radio[type=radio]:after{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem) var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}input.FormControl-radio[type=radio][disabled]~.FormControl-radio-labelWrap .FormControl-label{color:var(--control-fgColor-disabled,var(--color-primer-fg-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,.25rem)}input.FormControl-radio[type=radio]:checked:disabled,input.FormControl-radio[type=radio][disabled]:checked{border-color:var(--control-fgColor-disabled,var(--color-primer-fg-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,var(--color-primer-fg-disabled));cursor:not-allowed}input.FormControl-radio[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:2px}@media (forced-colors:active){input[type=radio].FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16,1rem) 0 0 0)}}
data/app/components/primer/alpha/text_field.css.json CHANGED
@@ -99,6 +99,8 @@
99
99
  ".FormControl-select-wrap",
100
100
  ".FormControl-select-wrap:after",
101
101
  ".FormControl-select-wrap .FormControl-select",
102
+ ".FormControl-select-wrap[data-multiple]:after",
103
+ ".FormControl-select-wrap[data-multiple] .FormControl-select",
102
104
  ".FormControl-checkbox-wrap",
103
105
  ".FormControl-radio-wrap",
104
106
  ".FormControl-checkbox-wrap .FormControl-checkbox-labelWrap",
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\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/text_field.pcss CHANGED
@@ -512,6 +512,16 @@
512
512
  appearance: none;
513
513
  padding-right: var(--base-size-20);
514
514
  }
515
+
516
+ &[data-multiple] {
517
+ &::after {
518
+ content: none;
519
+ }
520
+
521
+ & .FormControl-select {
522
+ padding-right: var(--base-size-8);
523
+ }
524
+ }
515
525
  }
516
526
 
517
527
  /* checkbox + radio specific styles */
data/app/components/primer/alpha/toggle_switch.rb CHANGED
@@ -24,8 +24,8 @@ module Primer
24
24
  # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
25
25
  # @param checked [Boolean] Whether the toggle switch is on or off.
26
26
  # @param enabled [Boolean] Whether or not the toggle switch responds to user input.
27
- # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
28
- # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
27
+ # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
28
+ # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
29
29
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
30
30
  def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, **system_arguments)
31
31
  @src = src
data/app/components/primer/beta/auto_complete/auto_complete.html.erb CHANGED
@@ -4,15 +4,15 @@
4
4
  <%= @label_text %>
5
5
  </label>
6
6
  <% if leading_visual || @show_clear_button %>
7
- <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-input-wrap--leadingVisual<% end %>">
8
- <span class="FormControl-input-leadingVisualWrap">
9
- <%= leading_visual %>
10
- </span>
11
- <%= input %>
12
- <% if @show_clear_button %>
13
- <button id="<%= @input_id %>-clear" class="FormControl-input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
14
- <% end %>
15
- </div>
7
+ <div class="<%= @field_wrap_classes %> <% if leading_visual %>FormControl-input-wrap--leadingVisual<% end %>">
8
+ <span class="FormControl-input-leadingVisualWrap">
9
+ <%= leading_visual %>
10
+ </span>
11
+ <%= input %>
12
+ <% if @show_clear_button %>
13
+ <button id="<%= @input_id %>-clear" class="FormControl-input-trailingAction" aria-label="Clear"><%= primer_octicon "x-circle-fill" %></button>
14
+ <% end %>
15
+ </div>
16
16
  <% else %>
17
17
  <%= input %>
18
18
  <% end %>
data/app/components/primer/beta/breadcrumbs.css CHANGED
@@ -1 +1 @@
1
- .breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis,var(--color-fg-subtle));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default,var(--color-fg-default))}
1
+ .breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis,var(--color-fg-subtle));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default,var(--color-fg-default));cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
data/app/components/primer/beta/breadcrumbs.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,kFAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,uBACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,oDACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n margin-left: -0.35em;\n white-space: nowrap;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n margin: 0 0.5em;\n content: '';\n border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n transform: rotate(15deg);\n }\n\n &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\n}\n\n.breadcrumb-item-selected a {\n color: var(--fgColor-default);\n}\n"]}
1
+ {"version":3,"sources":["breadcrumbs.pcss"],"names":[],"mappings":"AAAA,iBACE,oBAAqB,CAGrB,eAAgB,CAFhB,kBAAoB,CACpB,kBAeF,CAZE,uBAKE,kFAA6D,CAD7D,UAAW,CAHX,oBAAqB,CACrB,WAAa,CACb,aAAe,CAGf,2CACF,CAEA,6BACE,aACF,CAKA,+FACE,YACF,CAGF,4BACE,oDAA6B,CAC7B,wBAA0B,CAC1B,sCAAgC,CAAhC,8BACF","file":"breadcrumbs.css","sourcesContent":[".breadcrumb-item {\n display: inline-block;\n margin-left: -0.35em;\n white-space: nowrap;\n list-style: none;\n\n &::after {\n display: inline-block;\n height: 0.8em;\n margin: 0 0.5em;\n content: '';\n border-right: 0.1em solid var(--borderColor-neutral-emphasis);\n transform: rotate(15deg) translateY(0.0625em);\n }\n\n &:first-child {\n margin-left: 0;\n }\n}\n\n.breadcrumb-item-selected,\n.breadcrumb-item[aria-current]:not([aria-current='false']) {\n &::after {\n content: none;\n }\n}\n\n.breadcrumb-item-selected a {\n color: var(--fgColor-default);\n cursor: default !important;\n text-decoration: none !important;\n}\n"]}
data/app/components/primer/beta/breadcrumbs.pcss CHANGED
@@ -10,7 +10,7 @@
10
10
  margin: 0 0.5em;
11
11
  content: '';
12
12
  border-right: 0.1em solid var(--borderColor-neutral-emphasis);
13
- transform: rotate(15deg);
13
+ transform: rotate(15deg) translateY(0.0625em);
14
14
  }
15
15
 
16
16
  &:first-child {
@@ -27,4 +27,6 @@
27
27
 
28
28
  .breadcrumb-item-selected a {
29
29
  color: var(--fgColor-default);
30
+ cursor: default !important;
31
+ text-decoration: none !important;
30
32
  }
data/app/components/primer/beta/button.css CHANGED
@@ -1 +1 @@
1
- :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
1
+ :root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,.375rem);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button.Button--iconOnly{color:var(--fgColor-muted,var(--color-fg-muted))}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text));fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-btn-primary-shadow))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{color:var(--button-default-fgColor-rest,var(--color-btn-text));fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{background-color:var(--button-default-bgColor-disabled,var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border));color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled,var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{color:var(--fgColor-link,var(--color-accent-fg));fill:var(--fgColor-link,var(--color-accent-fg));border:none;display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled,var(--color-primer-fg-disabled));fill:var(--control-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text));fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow))}.Button--danger:hover:not(:disabled,.Button--inactive){color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small))}.Button--danger:hover:not(:disabled,.Button--inactive) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--color-btn-danger-hover-counter-fg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-disabled,var(--color-btn-border))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--color-btn-danger-disabled-counter-fg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--color-btn-danger-counter-fg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}.Button--inactive:not([aria-disabled=true],:disabled){background-color:var(--button-inactive-bgColor);border:0;color:var(--button-inactive-fgColor);cursor:default}
data/app/components/primer/beta/button.css.json CHANGED
@@ -8,6 +8,7 @@
8
8
  ".Button:active",
9
9
  ".Button:disabled",
10
10
  ".Button[aria-disabled=true]",
11
+ ".Button.Button--iconOnly",
11
12
  "a.Button:hover",
12
13
  "summary.Button:hover",
13
14
  ".Button-content",