@primer/view-components 0.45.1-rc.015a120e → 0.45.2

package/app/components/primer/alpha/text_field.css

@@ -1 +1,792 @@
-.FormControl{display:inline-flex;flex-direction:column;gap:var(--base-size-4)}.FormControl--fullWidth{display:flex}.FormControl-label{color:var(--fgColor-default);font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold);line-height:var(--text-body-lineHeight-medium)}.FormControl-caption{color:var(--fgColor-muted);font-weight:var(--text-caption-weight);margin-bottom:0}.FormControl-caption,.FormControl-inlineValidation{font-size:var(--text-caption-size);line-height:var(--text-caption-lineHeight)}.FormControl-inlineValidation{color:var(--control-danger-fgColor-rest);display:flex;font-weight:var(--base-text-weight-semibold);fill:var(--control-danger-fgColor-rest);align-items:flex-start;flex-direction:row;gap:var(--base-size-4)}.FormControl-inlineValidation p{margin-bottom:0}.FormControl-inlineValidation--success{color:var(--fgColor-success);fill:var(--fgColor-success)}.FormControl-inlineValidation--visual{align-items:center;display:flex;min-height:var(--base-size-16)}.FormControl-spacingWrapper{display:flex;flex-direction:column;row-gap:var(--stack-gap-normal)}.FormControl-horizontalGroup{column-gap:.5rem;display:flex}.FormControl-input,.FormControl-select,.FormControl-textarea{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}[invalid=true]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-danger)}[invalid=false]:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus){border-color:var(--control-borderColor-success)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-input,.FormControl-select,.FormControl-textarea{border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);line-height:var(--text-body-lineHeight-medium);padding-block:calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin));padding-inline:var(--control-medium-paddingInline-condensed);transition:80ms cubic-bezier(.33,1,.68,1);transition-property:color,background-color,box-shadow,border-color;width:100%}[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-disabled)}[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--control-bgColor-disabled)}:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder{color:var(--control-fgColor-placeholder);opacity:1}.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-size:var(--text-body-size-small);height:var(--control-small-size);padding-block:var(--control-small-paddingBlock);padding-inline:var(--control-small-paddingInline-normal)}.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-medium-size)}.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea){height:var(--control-large-size);padding-block:var(--control-large-paddingBlock);padding-inline:var(--control-large-paddingInline-normal)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea){background-color:var(--bgColor-muted)}.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible{background-color:var(--bgColor-default)}.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea){font-family:var(--fontStack-monospace)}.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-danger)}.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-success)}.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea){border-color:var(--control-borderColor-warning)}.FormControl-toggleSwitchInput{align-items:flex-start;display:flex;gap:var(--base-size-16)}.FormControl-input-wrap{display:grid;position:relative}.FormControl-input-wrap .FormControl-input-leadingVisualWrap{color:var(--fgColor-muted);display:block;height:var(--base-size-16);left:var(--base-size-8);pointer-events:none;position:absolute;top:var(--base-size-8);width:var(--base-size-16)}:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual{display:block;-webkit-user-select:none;user-select:none}.FormControl-input-wrap .FormControl-input-trailingVisualWrap{align-items:center;color:var(--fgColor-muted);display:flex;gap:var(--base-size-4);height:var(--base-size-16);pointer-events:none;position:absolute;right:var(--base-size-8);top:var(--base-size-8)}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel),:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText){max-width:25%;padding-left:var(--base-size-8)}:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel{overflow:hidden;text-overflow:ellipsis}.FormControl-input-wrap .FormControl-input-trailingAction{align-items:center;background:#0000;border:0;border-radius:var(--borderRadius-small);color:var(--fgColor-muted);cursor:pointer;display:grid;height:var(--control-xsmall-size);justify-content:center;padding:0;position:absolute;right:var(--base-size-4);top:var(--base-size-4);transition:.2s cubic-bezier(.3,0,.5,1);transition-property:color,background-color,border-color;width:var(--control-xsmall-size);z-index:4}:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg{-webkit-user-select:none;user-select:none}[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction){color:var(--control-fgColor-disabled);pointer-events:none}:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover{background:var(--control-transparent-bgColor-hover)}:is(.FormControl-input-wrap .FormControl-input-trailingAction):active{background:var(--control-transparent-bgColor-active)}.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction):before{background:var(--borderColor-default);content:"";display:block;height:var(--base-size-16);left:calc(var(--base-size-4)*-1);position:absolute;top:calc((var(--control-xsmall-size) - var(--base-size-16))/2);width:var(--borderWidth-thin)}:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction):after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:coarse){:is(.FormControl-input-wrap .FormControl-input-trailingAction):after{min-height:var(--control-minTarget-coarse);min-width:var(--control-minTarget-coarse)}}.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input{padding-inline-start:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap))}.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input{padding-inline-end:calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap{left:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap{right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap))}.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small{padding-inline-end:calc(var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction{height:calc(var(--control-small-size) - var(--base-size-8));width:calc(var(--control-small-size) - var(--base-size-8))}:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction):before{top:calc((var(--control-xsmall-size) - var(--base-size-16))/4)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap{left:var(--control-medium-paddingInline-normal);top:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap{right:var(--control-medium-paddingInline-normal);top:var(--control-medium-paddingInline-normal)}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large{padding-inline-start:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input,.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input{padding-inline-end:25%}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap))}.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large{padding-inline-end:calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) + var(--borderWidth-thin))}.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction{height:var(--control-small-size);right:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));top:calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2));width:var(--control-small-size)}:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction):before{height:var(--base-size-20);top:unset}.FormControl-select-wrap{display:grid;grid-template-columns:minmax(0,auto) var(--base-size-16)}.FormControl-select-wrap:after{background-color:var(--bgColor-neutral-emphasis);content:"";grid-column:2;grid-row:1;height:var(--base-size-16);mask:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgZmlsbD0iIzU4NjA2OSIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBkPSJtNC40MjcgOS40MjcgMy4zOTYgMy4zOTZhLjI1LjI1IDAgMCAwIC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwIDAgMTEuMzk2IDlINC42MDRhLjI1LjI1IDAgMCAwLS4xNzcuNDI3TTQuNDIzIDYuNDcgNy44MiAzLjA3MmEuMjUuMjUgMCAwIDEgLjM1NCAwTDExLjU3IDYuNDdhLjI1LjI1IDAgMCAxLS4xNzcuNDI3SDQuNmEuMjUuMjUgMCAwIDEtLjE3Ny0uNDI3Ii8+PC9zdmc+");mask-repeat:no-repeat;mask-size:contain;padding-right:var(--base-size-4);place-self:center end;pointer-events:none;width:var(--base-size-16)}.FormControl-select-wrap .FormControl-select{appearance:none;grid-column:1/-1;grid-row:1;padding-right:var(--base-size-20)}.FormControl-select-wrap[data-multiple]:after{content:none}.FormControl-select-wrap[data-multiple] .FormControl-select{padding-right:var(--base-size-8)}.FormControl-checkbox-wrap,.FormControl-radio-wrap{display:inline-grid;gap:var(--base-size-8);grid-template-columns:min-content auto}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap{display:flex;flex-direction:column;gap:var(--base-size-4)}:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label{cursor:pointer}.FormControl-check-group-wrap fieldset,.FormControl-radio-group-wrap fieldset{border:0;margin:0;padding:0}.FormControl-checkbox{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}.FormControl-checkbox[disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-checkbox[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-checkbox[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}.FormControl-checkbox:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-checkbox{appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-small);cursor:pointer;display:grid;height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);place-content:center;position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}.FormControl-checkbox:before{animation:checkmarkOut 80ms cubic-bezier(.65,0,.35,1) forwards;background-color:var(--control-checked-fgColor-rest);clip-path:inset(var(--base-size-16) 0 0 0);content:"";height:var(--base-size-16);mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSI5IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTIgOSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzguMjJhLjc1Ljc1IDAgMCAxIDAgMS4wNjFMNC41MiA4LjU0MWEuNzUuNzUgMCAwIDEtMS4wNjIgMEwuMjAyIDUuMjg1YS43NS43NSAwIDAgMSAxLjA2MS0xLjA2MWwyLjcyNSAyLjcyM0wxMC43MTguMjJhLjc1Ljc1IDAgMCAxIDEuMDYyIDAiIGNsaXAtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==");mask-position:center;mask-repeat:no-repeat;mask-size:75%;transition:visibility 0s linear .23s;visibility:hidden;width:var(--base-size-16)}:is(.FormControl-checkbox:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(.FormControl-checkbox[disabled]~.FormControl-checkbox-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-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) 0s}.FormControl-checkbox:checked:before{animation:checkmarkIn 80ms cubic-bezier(.65,0,.35,1) 80ms forwards;transition:visibility 0s linear 0s;visibility:visible}.FormControl-checkbox:checked:disabled{background-color:var(--control-fgColor-disabled);border-color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1}.FormControl-checkbox:checked:disabled:before{background-color:var(--control-checked-fgColor-rest)}@media (forced-colors:active){.FormControl-checkbox:checked{background-color:canvastext;border-color:canvastext}}.FormControl-checkbox:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.FormControl-checkbox:indeterminate:before{mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIyIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMTAgMiI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxYTEgMSAwIDAgMSAxLTFoOGExIDEgMCAxIDEgMCAySDFhMSAxIDAgMCAxLTEtMSIgY2xpcC1ydWxlPSJldmVub2RkIi8+PC9zdmc+");visibility:visible}.FormControl-radio{background-color:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--control-borderColor-rest,var(--color-border-default));box-shadow:var(--shadow-inset);color:var(--fgColor-default)}.FormControl-radio[disabled]{background-color:var(--control-bgColor-disabled);border-color:var(--control-borderColor-disabled);box-shadow:none;color:var(--control-fgColor-disabled);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--control-fgColor-disabled)}.FormControl-radio[invalid=true]:not(:focus){border-color:var(--control-borderColor-danger)}.FormControl-radio[invalid=false]:not(:focus){border-color:var(--control-borderColor-success)}.FormControl-radio:not([type=checkbox],[type=radio]):focus{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-radio:not([type=checkbox],[type=radio]):focus:not(:focus-visible){border-color:#0000;border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px #0000 var(--focus-outlineColor);outline:none}.FormControl-radio:not([type=checkbox],[type=radio]):focus-visible{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.FormControl-radio{appearance:none;border-color:var(--control-borderColor-emphasis);border-radius:var(--borderRadius-full);cursor:pointer;height:var(--base-size-16);margin:0;margin-top:var(--base-size-2);position:relative;transition:background-color,border-color 80ms cubic-bezier(.33,1,.68,1);width:var(--base-size-16)}:is(.FormControl-radio:after){content:"";height:100%;left:50%;min-height:var(--control-medium-size) var(--control-medium-size);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}:is(.FormControl-radio[disabled]~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:checked{border-color:var(--control-checked-borderColor-rest,var(--color-accent-fg));border-width:var(--base-size-4)}.FormControl-radio:checked:disabled,.FormControl-radio[disabled]:checked{border-color:var(--control-fgColor-disabled);cursor:not-allowed}:is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled)~.FormControl-radio-labelWrap) .FormControl-label{color:var(--control-fgColor-disabled);cursor:not-allowed}.FormControl-radio:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}@media (forced-colors:active){.FormControl-radio{background-color:canvastext;border-color:canvastext}}@keyframes checkmarkIn{0%{clip-path:inset(var(--base-size-16) 0 0 0)}to{clip-path:inset(0 0 0 0)}}@keyframes checkmarkOut{0%{clip-path:inset(0 0 0 0)}to{clip-path:inset(var(--base-size-16) 0 0 0)}}
+/* stylelint-disable selector-max-type */
+/* stylelint-disable max-nesting-depth */
+/* stylelint-disable selector-max-specificity */
+/* stylelint-disable primer/spacing */
+/* FormControl */
+/* groups label, field, caption and inline error message */
+.FormControl {
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+}
+/* fill container */
+.FormControl--fullWidth {
+  display: flex;
+}
+/* <label> */
+.FormControl-label {
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--text-body-lineHeight-medium);
+  color: var(--fgColor-default);
+}
+/* optional caption */
+.FormControl-caption {
+  margin-bottom: 0;
+  font-size: var(--text-caption-size);
+  font-weight: var(--text-caption-weight);
+  line-height: var(--text-caption-lineHeight);
+  color: var(--fgColor-muted);
+}
+/* inline validation message */
+.FormControl-inlineValidation {
+  display: flex;
+  font-size: var(--text-caption-size);
+  font-weight: var(--base-text-weight-semibold);
+  line-height: var(--text-caption-lineHeight);
+  color: var(--control-danger-fgColor-rest);
+  fill: var(--control-danger-fgColor-rest);
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--base-size-4);
+}
+.FormControl-inlineValidation p {
+    margin-bottom: 0;
+  }
+.FormControl-inlineValidation--success {
+  color: var(--fgColor-success);
+  fill: var(--fgColor-success);
+}
+.FormControl-inlineValidation--visual {
+  align-items: center;
+  display: flex;
+  min-height: var(--base-size-16);
+}
+.FormControl-spacingWrapper {
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--stack-gap-normal);
+}
+.FormControl-horizontalGroup {
+  display: flex;
+  column-gap: 0.5rem;
+}
+/* shared among all form control components (input, select, textarea, checkbox, radio) */
+/* TextInput structure
+** ===================
+**
+** .FormControl
+** ├─ .FormControl-label
+** │  ├─ .FormControl-input-wrap
+** │  │  ├─ .FormControl-input-trailingVisualWrap
+** │  │  │  ├─ .FormControl-input-trailingVisual
+** │  │  ├─ .FormControl-input-leadingVisualWrap
+** │  │  │  ├─ .FormControl-input-leadingVisual
+** │  │  ├─ .FormControl-input
+** │  │  ├─ .FormControl-input-trailingAction
+** ├─ .FormControl-inlineValidation
+** ├─ .FormControl-caption */
+/* // Select structure
+** ===================
+**
+** .FormControl
+** ├─ .FormControl-label
+** │  ├─ .FormControl-select-wrap
+** │  │  ├─ .FormControl-select
+** ├─ .FormControl-inlineValidation
+** ├─ .FormControl-caption */
+/* // Textarea structure
+** ===================
+**
+** .FormControl
+** ├─ .FormControl-label
+** ├─ .FormControl-textarea
+** ├─ .FormControl-inlineValidation
+** ├─ .FormControl-caption */
+.FormControl-input,
+.FormControl-select,
+.FormControl-textarea {
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
+  box-shadow: var(--shadow-inset);
+}
+[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    color: var(--control-fgColor-disabled);
+    cursor: not-allowed;
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    box-shadow: none;
+    opacity: 1;
+    -webkit-text-fill-color: var(--control-fgColor-disabled);
+  }
+[invalid='true']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
+    border-color: var(--control-borderColor-danger);
+  }
+[invalid='false']:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not(:focus) {
+    border-color: var(--control-borderColor-success);
+  }
+:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
+      border-color: transparent;
+
+      border-color: var(--focus-outlineColor);
+
+      outline: none;
+
+      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
+    }
+/* default focus state */
+:is(.FormControl-input,.FormControl-select,.FormControl-textarea):not([type='checkbox'],[type='radio']):focus-visible {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+  }
+.FormControl-input,
+.FormControl-select,
+.FormControl-textarea {
+
+  width: 100%;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--text-body-lineHeight-medium);
+  border-radius: var(--borderRadius-medium);
+  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
+  transition-property: color, background-color, box-shadow, border-color;
+  padding-inline: var(--control-medium-paddingInline-condensed);
+  padding-block: calc(var(--control-medium-paddingBlock) - var(--borderWidth-thin));
+}
+[disabled]:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
+      color: var(--control-fgColor-disabled);
+    }
+[readonly]:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    background-color: var(--control-bgColor-disabled);
+  }
+:is(.FormControl-input,.FormControl-select,.FormControl-textarea)::placeholder {
+    color: var(--control-fgColor-placeholder);
+    opacity: 1;
+  }
+/* sizes */
+.FormControl-small:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    height: var(--control-small-size);
+    padding-inline: var(--control-small-paddingInline-normal);
+    padding-block: var(--control-small-paddingBlock);
+    font-size: var(--text-body-size-small);
+  }
+.FormControl-medium:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    height: var(--control-medium-size);
+  }
+.FormControl-large:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    height: var(--control-large-size);
+    padding-inline: var(--control-large-paddingInline-normal);
+    padding-block: var(--control-large-paddingBlock);
+  }
+/* variants */
+.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    background-color: var(--bgColor-muted);
+  }
+.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus-visible,.FormControl-inset:is(.FormControl-input,.FormControl-select,.FormControl-textarea):focus {
+      background-color: var(--bgColor-default);
+    }
+.FormControl-monospace:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    font-family: var(--fontStack-monospace);
+  }
+/* validation states */
+.FormControl-error:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    border-color: var(--control-borderColor-danger);
+  }
+.FormControl-success:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    border-color: var(--control-borderColor-success);
+  }
+.FormControl-warning:is(.FormControl-input,.FormControl-select,.FormControl-textarea) {
+    border-color: var(--control-borderColor-warning);
+  }
+.FormControl-toggleSwitchInput {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--base-size-16);
+}
+/* positioning for leading/trailing items for TextInput */
+.FormControl-input-wrap {
+  position: relative;
+  display: grid;
+}
+.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
+    position: absolute;
+    top: var(--base-size-8);
+    left: var(--base-size-8);
+    display: block;
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    color: var(--fgColor-muted);
+    pointer-events: none;
+
+    /* octicon */
+  }
+:is(.FormControl-input-wrap .FormControl-input-leadingVisualWrap) .FormControl-input-leadingVisual {
+      display: block;
+      -webkit-user-select: none;
+              user-select: none;
+    }
+.FormControl-input-wrap .FormControl-input-trailingVisualWrap {
+    position: absolute;
+    top: var(--base-size-8);
+    right: var(--base-size-8);
+    display: flex;
+    height: var(--base-size-16);
+    align-items: center;
+    gap: var(--base-size-4);
+    color: var(--fgColor-muted);
+    pointer-events: none;
+  }
+:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualText) {
+      max-width: 25%;
+      padding-left: var(--base-size-8);
+    }
+:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap):has(.FormControl-input-trailingVisualLabel) {
+      max-width: 25%;
+      padding-left: var(--base-size-8);
+    }
+:is(.FormControl-input-wrap .FormControl-input-trailingVisualWrap) .FormControl-input-trailingVisualLabel {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+/* TODO: replace with new Button component */
+.FormControl-input-wrap .FormControl-input-trailingAction {
+    position: absolute;
+    top: var(--base-size-4);
+    right: var(--base-size-4);
+    z-index: 4;
+    display: grid;
+    width: var(--control-xsmall-size);
+    height: var(--control-xsmall-size);
+    padding: 0;
+    color: var(--fgColor-muted);
+    cursor: pointer;
+    background: transparent;
+    border: 0;
+    border-radius: var(--borderRadius-small);
+    transition: 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    transition-property: color, background-color, border-color;
+    align-items: center;
+    justify-content: center;
+  }
+:is(.FormControl-input-wrap .FormControl-input-trailingAction) svg {
+      -webkit-user-select: none;
+              user-select: none;
+    }
+[disabled]:is(.FormControl-input-wrap .FormControl-input-trailingAction) {
+      color: var(--control-fgColor-disabled);
+      pointer-events: none;
+    }
+:is(.FormControl-input-wrap .FormControl-input-trailingAction):hover {
+      background: var(--control-transparent-bgColor-hover);
+    }
+:is(.FormControl-input-wrap .FormControl-input-trailingAction):active {
+      background: var(--control-transparent-bgColor-active);
+    }
+/* show vertical divider line between field and button */
+.FormControl-input-trailingAction--divider:is(.FormControl-input-wrap .FormControl-input-trailingAction)::before {
+        position: absolute;
+        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 2);
+        left: calc(var(--base-size-4) * -1);
+        display: block;
+        width: var(--borderWidth-thin);
+        height: var(--base-size-16);
+        content: '';
+        /* stylelint-disable-next-line primer/colors */
+        background: var(--borderColor-default);
+      }
+:is(:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-medium-size) var(--control-medium-size);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+}
+@media (pointer: coarse) {
+:is(.FormControl-input-wrap .FormControl-input-trailingAction)::after {
+        min-width: var(--control-minTarget-coarse);
+        min-height: var(--control-minTarget-coarse);
+    }
+      }
+/* if leadingVisual is present */
+/*
+	┌──32px──┬────────────────────┐
+	╎  ┌───┐   ┌────────────────┐ ╎
+	╎   16px    16px              ╎
+	╎  └───┘   └────────────────┘ ╎
+	└───────8px───────────────────┘
+	*/
+.FormControl-input-wrap.FormControl-input-wrap--leadingVisual .FormControl-input {
+      padding-inline-start: calc(
+        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
+      ); /* 32px */
+    }
+/* if trailingVisual is present */
+/*
+	┌──────────────────┬──32px──┐
+	╎  ┌──────────────┐  ┌────┐ ╎
+	╎   24px               24px ╎
+	╎  └──────────────┘  └────┘ ╎
+	└──────────────────┴────────┘
+  */
+.FormControl-input-wrap.FormControl-input-wrap--trailingVisual .FormControl-input {
+      padding-inline-end: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap));
+    }
+.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
+      padding-inline-end: 25%
+    }
+.FormControl-input-wrap.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+      padding-inline-end: 25%
+    }
+/*
+	┌──────────────────┬──32px──┐
+	╎  ┌──────────────┐  ┌────┐ ╎
+	╎   24px               24px ╎
+	╎  └──────────────┘  └────┘ ╎
+	└──────────────────┴────────┘
+  */
+/* if trailingAction is present */
+.FormControl-input-wrap.FormControl-input-wrap--trailingAction .FormControl-input {
+      padding-inline-end: calc(
+        var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap)
+      ); /* 32px */
+    }
+/*
+		32px + 1px border
+		┌──────────────────┬──33px──┐
+		╎  ┌──────────────┐  ┌────┐ ╎
+		╎   24px               24px   ╎
+		╎  └──────────────┘  └────┘ ╎
+		└──────────────────┴────────┘
+		*/
+/* if trailingAction divider is present, add 1px padding to accomodate input field text
+    ** can be refactored to has(.FormControl-input-trailingAction--divider) */
+.FormControl-input-wrap.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input {
+        padding-inline-end: calc(
+          var(--control-medium-paddingInline-condensed) + var(--base-size-16) + var(--control-medium-gap) +
+            var(--borderWidth-thin)
+        ); /* 33px */
+      }
+/* size modifications can be refactored with :has() - FormControl-input-wrap:has(.FormControl-large)
+  // sizes */
+.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-leadingVisualWrap {
+      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+      left: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+    }
+.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingVisualWrap {
+      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+      right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+    }
+/*
+    ┌──────────────────┬──28px──┐
+    ╎  ┌──────────────┐  ┌────┐ ╎
+    ╎   20px               20px   ╎
+    ╎  └──────────────┘  └────┘ ╎
+    └──────────────────┴────────┘
+    */
+.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-small {
+        padding-inline-end: calc(
+          var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap)
+        ); /* 28px */
+      }
+/*
+			28px + 1px border
+			┌──────────────────┬──29px──┐
+			╎  ┌──────────────┐  ┌────┐ ╎
+			╎   20px               20px   ╎
+			╎  └──────────────┘  └────┘ ╎
+			└──────────────────┴────────┘
+			*/
+.FormControl-input-wrap.FormControl-input-wrap--small.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-small {
+          padding-inline-end: calc(
+            var(--control-small-paddingInline-condensed) + var(--base-size-16) + var(--control-small-gap) +
+              var(--borderWidth-thin)
+          ); /* 29px */
+        }
+.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction {
+      width: calc(var(--control-small-size) - var(--base-size-8));
+      height: calc(var(--control-small-size) - var(--base-size-8));
+    }
+:is(.FormControl-input-wrap.FormControl-input-wrap--small .FormControl-input-trailingAction)::before {
+        top: calc((var(--control-xsmall-size) - var(--base-size-16)) / 4); /* 2px */
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-leadingVisualWrap {
+      top: var(--control-medium-paddingInline-normal);
+      left: var(--control-medium-paddingInline-normal);
+    }
+.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingVisualWrap {
+      top: var(--control-medium-paddingInline-normal);
+      right: var(--control-medium-paddingInline-normal);
+    }
+/*
+    ┌──36px──┬───12px padding──────┐
+    ╎  ┌───┐   ┌────────────────┐ ╎
+    ╎   16px    16px                ╎
+    ╎  └───┘   └────────────────┘ ╎
+    └12px───8px───────────────────┘
+    */
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--leadingVisual .FormControl-input.FormControl-large {
+        padding-inline-start: calc(
+          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
+        ); /* 36px */
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual .FormControl-input {
+        padding-inline-end: calc(var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap));
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualText) .FormControl-input {
+        padding-inline-end: 25%
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingVisual:has(.FormControl-input-trailingVisualLabel) .FormControl-input {
+        padding-inline-end: 25%
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingText .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingLabel .FormControl-input.FormControl-large {
+        padding-inline-end: 25%;
+      }
+/*
+    ┌──────────────────┬──36px──┐
+    ╎  ┌──────────────┐  ┌────┐ ╎
+    ╎   28px               28px   ╎
+    ╎  └──────────────┘  └────┘ ╎
+    └──────────────────┴────────┘
+    */
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction .FormControl-input.FormControl-large {
+        padding-inline-end: calc(
+          var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap)
+        ); /* 36px */
+      }
+/*
+			┌──────────────────┬──37px──┐
+			╎  ┌──────────────┐  ┌────┐ ╎
+			╎   28px               28px   ╎
+			╎  └──────────────┘  └────┘ ╎
+			└──────────────────┴────────┘
+			*/
+.FormControl-input-wrap.FormControl-input-wrap--large.FormControl-input-wrap--trailingAction.FormControl-input-wrap-trailingAction--divider .FormControl-input.FormControl-large {
+          padding-inline-end: calc(
+            var(--control-large-paddingInline-normal) + var(--base-size-16) + var(--control-large-gap) +
+              var(--borderWidth-thin)
+          ); /* 37px */
+        }
+.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction {
+      top: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+      right: calc(var(--control-medium-paddingInline-condensed) - var(--base-size-2)); /* 6px */
+      width: var(--control-small-size);
+      height: var(--control-small-size);
+    }
+:is(.FormControl-input-wrap.FormControl-input-wrap--large .FormControl-input-trailingAction)::before {
+        top: unset;
+        height: var(--base-size-20);
+      }
+.FormControl-select-wrap {
+  display: grid;
+  grid-template-columns: minmax(0, auto) var(--base-size-16);
+
+  /* mask allows for background-color to respect themes */
+}
+.FormControl-select-wrap::after {
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    padding-right: var(--base-size-4);
+    pointer-events: none;
+    content: '';
+    background-color: var(--bgColor-neutral-emphasis);
+    mask: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
+    mask-size: contain;
+    mask-repeat: no-repeat;
+    grid-column: 2;
+    grid-row: 1;
+    place-self: center end;
+  }
+/* spans entire grid below mask */
+.FormControl-select-wrap .FormControl-select {
+    grid-column: 1/-1;
+    grid-row: 1;
+    appearance: none;
+    padding-right: var(--base-size-20);
+  }
+.FormControl-select-wrap[data-multiple]::after {
+      content: none;
+    }
+.FormControl-select-wrap[data-multiple] .FormControl-select {
+      padding-right: var(--base-size-8);
+    }
+/* checkbox + radio specific styles */
+/* // Checkbox + Radio structure
+** ===================
+**
+** .FormControl-radio-wrap
+** ├─ .FormControl-radio
+** ├─ .FormControl-radio-labelWrap
+** │  ├─ .FormControl-label
+** │  ├─ .FormControl-caption */
+.FormControl-checkbox-wrap,
+.FormControl-radio-wrap {
+  display: inline-grid;
+  grid-template-columns: min-content auto;
+  gap: var(--base-size-8);
+}
+:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-checkbox-labelWrap,:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-radio-labelWrap {
+    display: flex;
+    flex-direction: column;
+    gap: var(--base-size-4);
+  }
+:is(.FormControl-checkbox-wrap,.FormControl-radio-wrap) .FormControl-label {
+    cursor: pointer;
+  }
+.FormControl-radio-group-wrap fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+.FormControl-check-group-wrap fieldset {
+    padding: 0;
+    margin: 0;
+    border: 0;
+  }
+/* these selectors are temporary to override base.scss
+** once Field styles are widely adopted, we can adjust this and the global base styles */
+.FormControl-checkbox {
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
+  box-shadow: var(--shadow-inset);
+}
+.FormControl-checkbox[disabled] {
+    color: var(--control-fgColor-disabled);
+    cursor: not-allowed;
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    box-shadow: none;
+    opacity: 1;
+    -webkit-text-fill-color: var(--control-fgColor-disabled);
+  }
+.FormControl-checkbox[invalid='true']:not(:focus) {
+    border-color: var(--control-borderColor-danger);
+  }
+.FormControl-checkbox[invalid='false']:not(:focus) {
+    border-color: var(--control-borderColor-success);
+  }
+.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
+      border-color: transparent;
+
+      border-color: var(--focus-outlineColor);
+
+      outline: none;
+
+      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
+    }
+/* default focus state */
+.FormControl-checkbox:not([type='checkbox'],[type='radio']):focus-visible {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+  }
+.FormControl-checkbox {
+
+  position: relative;
+  display: grid;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  margin: 0;
+  margin-top: var(--base-size-2); /* 2px to center align with label (20px line-height) */
+  cursor: pointer;
+  border-color: var(--control-borderColor-emphasis);
+  border-radius: var(--borderRadius-small);
+  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
+  appearance: none;
+  place-content: center;
+}
+.FormControl-checkbox::before {
+    width: var(--base-size-16);
+    height: var(--base-size-16);
+    visibility: hidden;
+    content: '';
+    /* stylelint-disable-next-line primer/colors */
+    background-color: var(--control-checked-fgColor-rest);
+    transition: visibility 0s linear 230ms;
+    clip-path: inset(var(--base-size-16) 0 0 0);
+
+    /* octicon checkmark image */
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDEyIDkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzgwMyAwLjIxOTYyNUMxMS45MjEgMC4zNjA0MjcgMTIgMC41NTEzMDUgMTIgMC43NTAzMTNDMTIgMC45NDkzMjEgMTEuOTIxIDEuMTQwMTkgMTEuNzgwMyAxLjI4MUw0LjUxODYgOC41NDA0MkM0LjM3Nzc1IDguNjgxIDQuMTg2ODIgOC43NiAzLjk4Nzc0IDguNzZDMy43ODg2NyA4Ljc2IDMuNTk3NzMgOC42ODEgMy40NTY4OSA4LjU0MDQyTDAuMjAxNjIyIDUuMjg2MkMwLjA2ODkyNzcgNS4xNDM4MyAtMC4wMDMzMDkwNSA0Ljk1NTU1IDAuMDAwMTE2NDkzIDQuNzYwOThDMC4wMDM1NTIwNSA0LjU2NjQzIDAuMDgyMzg5NCA0LjM4MDgxIDAuMjIwMDMyIDQuMjQzMjFDMC4zNTc2NjUgNC4xMDU2MiAwLjU0MzM1NSA0LjAyNjgxIDAuNzM3OTcgNC4wMjMzOEMwLjkzMjU4NCA0LjAxOTk0IDEuMTIwOTMgNC4wOTIxNyAxLjI2MzM0IDQuMjI0ODJMMy45ODc3NCA2Ljk0ODM1TDEwLjcxODYgMC4yMTk2MjVDMTAuODU5NSAwLjA3ODk5MjMgMTEuMDUwNCAwIDExLjI0OTUgMEMxMS40NDg1IDAgMTEuNjM5NSAwLjA3ODk5MjMgMTEuNzgwMyAwLjIxOTYyNVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=');
+    mask-size: 75%;
+    mask-repeat: no-repeat;
+    mask-position: center;
+    animation: checkmarkOut 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards; /* slightly snappier animation out */
+  }
+/* extend touch target */
+:is(.FormControl-checkbox::after) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-medium-size) var(--control-medium-size);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+}
+:is(.FormControl-checkbox[disabled] ~ .FormControl-checkbox-labelWrap) .FormControl-label {
+        color: var(--control-fgColor-disabled);
+        cursor: not-allowed;
+      }
+.FormControl-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(0.32, 0, 0.67, 0) 0ms; /* unchecked -> checked */
+  }
+.FormControl-checkbox:checked::before {
+      visibility: visible;
+      transition: visibility 0s linear 0s;
+      animation: checkmarkIn 80ms cubic-bezier(0.65, 0, 0.35, 1) forwards 80ms;
+    }
+.FormControl-checkbox:checked:disabled {
+      cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
+      background-color: var(--control-fgColor-disabled);
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--control-fgColor-disabled);
+      opacity: 1;
+    }
+.FormControl-checkbox:checked:disabled::before {
+        /* stylelint-disable-next-line primer/colors */
+        background-color: var(--control-checked-fgColor-rest);
+      }
+/* Windows High Contrast mode */
+@media (forced-colors: active) {
+.FormControl-checkbox:checked {
+      background-color: canvastext;
+      border-color: canvastext;
+  }
+    }
+.FormControl-checkbox:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+.FormControl-checkbox:indeterminate::before {
+      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMCAxQzAgMC40NDc3MTUgMC40NDc3MTUgMCAxIDBIOUM5LjU1MjI5IDAgMTAgMC40NDc3MTUgMTAgMUMxMCAxLjU1MjI4IDkuNTUyMjkgMiA5IDJIMUMwLjQ0NzcxNSAyIDAgMS41NTIyOCAwIDFaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
+      visibility: visible;
+    }
+.FormControl-radio {
+  color: var(--fgColor-default);
+  background-color: var(--bgColor-default);
+  border: var(--borderWidth-thin) solid var(--control-borderColor-rest, var(--color-border-default));
+  box-shadow: var(--shadow-inset);
+}
+.FormControl-radio[disabled] {
+    color: var(--control-fgColor-disabled);
+    cursor: not-allowed;
+    background-color: var(--control-bgColor-disabled);
+    border-color: var(--control-borderColor-disabled);
+    box-shadow: none;
+    opacity: 1;
+    -webkit-text-fill-color: var(--control-fgColor-disabled);
+  }
+.FormControl-radio[invalid='true']:not(:focus) {
+    border-color: var(--control-borderColor-danger);
+  }
+.FormControl-radio[invalid='false']:not(:focus) {
+    border-color: var(--control-borderColor-success);
+  }
+.FormControl-radio:not([type='checkbox'],[type='radio']):focus {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+.FormControl-radio:not([type='checkbox'],[type='radio']):focus:not(:focus-visible) {
+      border-color: transparent;
+
+      border-color: var(--focus-outlineColor);
+
+      outline: none;
+
+      box-shadow: inset 0 0 0 1px transparent var(--focus-outlineColor);
+    }
+/* default focus state */
+.FormControl-radio:not([type='checkbox'],[type='radio']):focus-visible {
+    border-color: var(--focus-outlineColor);
+    outline: none;
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
+  }
+.FormControl-radio {
+
+  position: relative;
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+  margin: 0;
+  margin-top: var(--base-size-2); /* 2px to center align with label (20px line-height) */
+  cursor: pointer;
+  border-color: var(--control-borderColor-emphasis);
+  border-radius: var(--borderRadius-full);
+  transition: background-color, border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */
+  appearance: none;
+}
+:is(.FormControl-radio::after) {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  min-height: var(--control-medium-size) var(--control-medium-size);
+  content: "";
+  transform: translateX(-50%) translateY(-50%);
+}
+:is(.FormControl-radio[disabled] ~ .FormControl-radio-labelWrap) .FormControl-label {
+        color: var(--control-fgColor-disabled);
+        cursor: not-allowed;
+      }
+.FormControl-radio:checked {
+    border-color: var(--control-checked-borderColor-rest, var(--color-accent-fg));
+    /* stylelint-disable-next-line primer/borders */
+    border-width: var(--base-size-4);
+  }
+.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled {
+      cursor: not-allowed;
+      /* stylelint-disable-next-line primer/colors */
+      border-color: var(--control-fgColor-disabled);
+    }
+:is(:is(.FormControl-radio[disabled]:checked,.FormControl-radio:checked:disabled) ~ .FormControl-radio-labelWrap) .FormControl-label {
+          color: var(--control-fgColor-disabled);
+          cursor: not-allowed;
+        }
+.FormControl-radio:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+/* Windows High Contrast mode */
+@media (forced-colors: active) {
+.FormControl-radio {
+    background-color: canvastext;
+    border-color: canvastext;
+}
+  }
+@keyframes checkmarkIn {
+  from {
+    clip-path: inset(var(--base-size-16) 0 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0 0 0);
+  }
+}
+@keyframes checkmarkOut {
+  from {
+    clip-path: inset(0 0 0 0);
+  }
+
+  to {
+    clip-path: inset(var(--base-size-16) 0 0 0);
+  }
+}